:root,
.pc-theme {
	color-scheme: light dark;
	/* Themed scrollbars: token-coloured thumb, transparent track. Inherits to every scroll
	   region under the theme root; see the scrollbar section at the end of this file. */
	--pc-scrollbar-thumb: color-mix(in srgb, var(--pc-color-on-surface-variant) 50%, transparent);
	scrollbar-color: var(--pc-scrollbar-thumb) transparent;
	--md-sys-color-primary: #6750a4;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #eaddff;
	--md-sys-color-on-primary-container: #21005d;
	--md-sys-color-secondary: #625b71;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #e8def8;
	--md-sys-color-on-secondary-container: #1d192b;
	--md-sys-color-tertiary: #7d5260;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #ffd8e4;
	--md-sys-color-on-tertiary-container: #31111d;
	--md-sys-color-error: #b3261e;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-error-container: #f9dedc;
	--md-sys-color-on-error-container: #410e0b;
	--md-sys-color-surface: #fffbfe;
	--md-sys-color-on-surface: #1d1b20;
	--md-sys-color-surface-variant: #e7e0ec;
	--md-sys-color-on-surface-variant: #49454f;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f7f2fa;
	--md-sys-color-surface-container: #f3edf7;
	--md-sys-color-surface-container-high: #ece6f0;
	--md-sys-color-surface-container-highest: #e6e0e9;
	--md-sys-color-outline: #79747e;
	--md-sys-color-outline-variant: #cac4d0;
	--md-sys-color-inverse-surface: #322f35;
	--md-sys-color-inverse-on-surface: #f5eff7;
	--md-sys-color-success: #386a20;
	--md-sys-color-on-success: #ffffff;
	--md-sys-color-success-container: #b7f397;
	--md-sys-color-on-success-container: #082100;
	--md-sys-color-warning: #7a5900;
	--md-sys-color-on-warning: #ffffff;
	--md-sys-color-warning-container: #ffdf91;
	--md-sys-color-on-warning-container: #261a00;
	--md-sys-color-info: #0061a4;
	--md-sys-color-on-info: #ffffff;
	--md-sys-color-info-container: #d1e4ff;
	--md-sys-color-on-info-container: #001d36;

	--md-sys-shape-corner-extra-small: calc(0.25rem * var(--pc-font-scale, 1));
	--md-sys-shape-corner-small: calc(0.5rem * var(--pc-font-scale, 1));
	--md-sys-shape-corner-medium: calc(0.75rem * var(--pc-font-scale, 1));
	--md-sys-shape-corner-large: calc(1rem * var(--pc-font-scale, 1));
	--md-sys-shape-corner-extra-large: calc(1.75rem * var(--pc-font-scale, 1));
	--md-sys-shape-corner-full: calc(62.4375rem * var(--pc-font-scale, 1));

	--md-sys-elevation-level-0: none;
	--md-sys-elevation-level-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
	--md-sys-elevation-level-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px calc(0.375rem * var(--pc-font-scale, 1)) 2px rgb(0 0 0 / 0.15);
	--md-sys-elevation-level-3: 0 1px 3px rgb(0 0 0 / 0.3), 0 calc(0.25rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1)) 3px rgb(0 0 0 / 0.15);

	--md-sys-motion-duration-short: 100ms;
	--md-sys-motion-duration-medium: 250ms;
	--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

	/*
	 * Motion physics roles (M3 motion system). Spatial curves animate movement,
	 * size and shape and may overshoot; effects curves animate colour, opacity
	 * and elevation and never overshoot. Values are Google's published web
	 * equivalents of the standard-scheme motion springs; the expressive design
	 * language swaps in the expressive spatial springs.
	 */
	--md-sys-motion-spatial-fast-easing: cubic-bezier(0.27, 1.06, 0.18, 1);
	--md-sys-motion-spatial-fast-duration: 350ms;
	--md-sys-motion-spatial-default-easing: cubic-bezier(0.27, 1.06, 0.18, 1);
	--md-sys-motion-spatial-default-duration: 500ms;
	--md-sys-motion-spatial-slow-easing: cubic-bezier(0.27, 1.06, 0.18, 1);
	--md-sys-motion-spatial-slow-duration: 750ms;
	--md-sys-motion-effects-fast-easing: cubic-bezier(0.31, 0.94, 0.34, 1);
	--md-sys-motion-effects-fast-duration: 150ms;
	--md-sys-motion-effects-default-easing: cubic-bezier(0.34, 0.8, 0.34, 1);
	--md-sys-motion-effects-default-duration: 200ms;
	--md-sys-motion-effects-slow-easing: cubic-bezier(0.34, 0.88, 0.34, 1);
	--md-sys-motion-effects-slow-duration: 300ms;

	--md-sys-typescale-font-family: Roboto, "Segoe UI", Arial, sans-serif;

	/*
	 * Stable component contract. Material 3 is the default adapter, while
	 * components consume only these library-neutral semantic tokens. Refined
	 * and host-defined design languages override --pc-* under their own
	 * data-design-language value without changing component APIs or markup.
	 */
	--pc-color-primary: var(--md-sys-color-primary);
	--pc-color-on-primary: var(--md-sys-color-on-primary);
	--pc-color-primary-container: var(--md-sys-color-primary-container);
	--pc-color-on-primary-container: var(--md-sys-color-on-primary-container);
	--pc-color-secondary: var(--md-sys-color-secondary);
	--pc-color-on-secondary: var(--md-sys-color-on-secondary);
	--pc-color-secondary-container: var(--md-sys-color-secondary-container);
	--pc-color-on-secondary-container: var(--md-sys-color-on-secondary-container);
	--pc-color-tertiary: var(--md-sys-color-tertiary);
	--pc-color-on-tertiary: var(--md-sys-color-on-tertiary);
	--pc-color-tertiary-container: var(--md-sys-color-tertiary-container);
	--pc-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
	--pc-color-error: var(--md-sys-color-error);
	--pc-color-on-error: var(--md-sys-color-on-error);
	--pc-color-error-container: var(--md-sys-color-error-container);
	--pc-color-on-error-container: var(--md-sys-color-on-error-container);
	--pc-color-surface: var(--md-sys-color-surface);
	--pc-color-on-surface: var(--md-sys-color-on-surface);
	--pc-color-surface-variant: var(--md-sys-color-surface-variant);
	--pc-color-on-surface-variant: var(--md-sys-color-on-surface-variant);
	--pc-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
	--pc-color-surface-container-low: var(--md-sys-color-surface-container-low);
	--pc-color-surface-container: var(--md-sys-color-surface-container);
	--pc-color-surface-container-high: var(--md-sys-color-surface-container-high);
	--pc-color-surface-container-highest: var(--md-sys-color-surface-container-highest);
	--pc-color-outline: var(--md-sys-color-outline);
	--pc-color-outline-variant: var(--md-sys-color-outline-variant);
	--pc-color-inverse-surface: var(--md-sys-color-inverse-surface);
	--pc-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
	/*
	 * Hover and focus hints (PlatformTooltip, chart tooltips, scheduler event tooltips) sit on
	 * their own container, not the inverse surface: a mid-tone neutral that is clearly darker
	 * than the page in light mode and clearly lighter in dark mode without reaching the
	 * near-black / near-white inverse surface (the softer grey MudBlazor tooltips used). Both
	 * are mixed from the active neutral roles, so colour schemes, generated partner schemes and
	 * design languages that retune the surfaces carry through. The dark values are below.
	 */
	--pc-color-tooltip-container: color-mix(in srgb, var(--pc-color-on-surface) 70%, var(--pc-color-surface));
	--pc-color-on-tooltip-container: var(--pc-color-surface-container-lowest);
	/*
	 * Coloured content in a hint (an error icon, a primary link in rich TooltipContent) is mixed
	 * towards the hint's text colour: the light scheme's saturated role tones have almost the
	 * luminance of the mid-tone container (error #b3261e is about 1:1 on it), so they take this
	 * share of the role and the rest of the text colour. Dark values are below.
	 */
	--pc-tooltip-role-weight: 30%;
	--pc-color-success: var(--md-sys-color-success);
	--pc-color-on-success: var(--md-sys-color-on-success);
	--pc-color-success-container: var(--md-sys-color-success-container);
	--pc-color-on-success-container: var(--md-sys-color-on-success-container);
	--pc-color-warning: var(--md-sys-color-warning);
	--pc-color-on-warning: var(--md-sys-color-on-warning);
	--pc-color-warning-container: var(--md-sys-color-warning-container);
	--pc-color-on-warning-container: var(--md-sys-color-on-warning-container);
	--pc-color-info: var(--md-sys-color-info);
	--pc-color-on-info: var(--md-sys-color-on-info);
	--pc-color-info-container: var(--md-sys-color-info-container);
	--pc-color-on-info-container: var(--md-sys-color-on-info-container);
	--pc-chart-series-1: var(--pc-color-primary);
	--pc-chart-series-2: var(--pc-color-tertiary);
	--pc-chart-series-3: var(--pc-color-info);
	--pc-chart-series-4: var(--pc-color-success);
	--pc-chart-series-5: var(--pc-color-warning);
	--pc-chart-series-6: color-mix(in srgb, var(--pc-color-primary) 42%, var(--pc-color-warning));
	--pc-chart-series-7: color-mix(in srgb, var(--pc-color-tertiary) 48%, var(--pc-color-info));
	--pc-chart-series-8: var(--pc-color-secondary);
	/*
	 * Code syntax colours are deliberately theme-independent — VS Code's
	 * Light+/Dark+ palette rather than brand roles. A white label whose
	 * primary is (say) yellow must not restyle code documents, both because
	 * developers expect editor-standard colouring and because a brand colour
	 * could collide with the tag treatment. Only neutrals (plain text,
	 * punctuation) follow the theme's neutral tones. Dark values live in the
	 * [data-theme="dark"] block.
	 */
	--pc-code-plain: var(--pc-color-on-surface);
	--pc-code-property: #0451a5;
	--pc-code-element: #800000;
	--pc-code-attribute: #e50000;
	--pc-code-string: #a31515;
	--pc-code-number: #098658;
	--pc-code-keyword: #0000ff;
	--pc-code-comment: #008000;
	--pc-code-punctuation: var(--pc-color-on-surface-variant);
	--pc-code-tag: #af00db;
	--pc-code-tag-background: color-mix(in srgb, var(--pc-code-tag) 12%, transparent);
	--pc-shape-corner-extra-small: var(--md-sys-shape-corner-extra-small);
	--pc-shape-corner-small: var(--md-sys-shape-corner-small);
	--pc-shape-corner-medium: var(--md-sys-shape-corner-medium);
	--pc-shape-corner-large: var(--md-sys-shape-corner-large);
	--pc-shape-corner-extra-large: var(--md-sys-shape-corner-extra-large);
	--pc-shape-corner-full: var(--md-sys-shape-corner-full);
	--pc-elevation-level-0: var(--md-sys-elevation-level-0);
	--pc-elevation-level-1: var(--md-sys-elevation-level-1);
	--pc-elevation-level-2: var(--md-sys-elevation-level-2);
	--pc-elevation-level-3: var(--md-sys-elevation-level-3);
	--pc-motion-duration-short: var(--md-sys-motion-duration-short);
	--pc-motion-duration-medium: var(--md-sys-motion-duration-medium);
	--pc-motion-easing-standard: var(--md-sys-motion-easing-standard);
	--pc-motion-spatial-fast-easing: var(--md-sys-motion-spatial-fast-easing);
	--pc-motion-spatial-fast-duration: var(--md-sys-motion-spatial-fast-duration);
	--pc-motion-spatial-default-easing: var(--md-sys-motion-spatial-default-easing);
	--pc-motion-spatial-default-duration: var(--md-sys-motion-spatial-default-duration);
	--pc-motion-spatial-slow-easing: var(--md-sys-motion-spatial-slow-easing);
	--pc-motion-spatial-slow-duration: var(--md-sys-motion-spatial-slow-duration);
	--pc-motion-effects-fast-easing: var(--md-sys-motion-effects-fast-easing);
	--pc-motion-effects-fast-duration: var(--md-sys-motion-effects-fast-duration);
	--pc-motion-effects-default-easing: var(--md-sys-motion-effects-default-easing);
	--pc-motion-effects-default-duration: var(--md-sys-motion-effects-default-duration);
	--pc-motion-effects-slow-easing: var(--md-sys-motion-effects-slow-easing);
	--pc-motion-effects-slow-duration: var(--md-sys-motion-effects-slow-duration);
	/* --pc-brand-font-family is host-owned and never declared here: a white-label host sets it
	   (for example .app-root { --pc-brand-font-family: Rubik, Roboto, sans-serif; }) and it wins
	   over every design language's font, in nested themes too. */
	--pc-typescale-font-family: var(--pc-brand-font-family, var(--md-sys-typescale-font-family));
	--pc-typescale-heading-weight: 400;
	--pc-typescale-heading-letter-spacing: normal;
	--pc-typescale-display-large-letter-spacing: calc(-0.015625rem * var(--pc-font-scale, 1));
	--pc-density-space-xs: calc(0.25rem * var(--pc-font-scale, 1));
	--pc-density-space-sm: calc(0.5rem * var(--pc-font-scale, 1));
	--pc-density-space-md: calc(0.75rem * var(--pc-font-scale, 1));
	--pc-density-space-lg: calc(1rem * var(--pc-font-scale, 1));
	--pc-density-space-xl: calc(1.5rem * var(--pc-font-scale, 1));
	--pc-density-control-small: calc(2rem * var(--pc-font-scale, 1));
	--pc-density-control-medium: calc(2.5rem * var(--pc-font-scale, 1));
	--pc-density-control-large: calc(3rem * var(--pc-font-scale, 1));
	--pc-density-field-height: calc(3.5rem * var(--pc-font-scale, 1));
	--pc-density-field-input-height: calc(3.375rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-block: calc(0.9375rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-inline: calc(1rem * var(--pc-font-scale, 1));
	--pc-density-row-height: calc(3.5rem * var(--pc-font-scale, 1));
	--pc-density-cell-padding-inline: calc(1rem * var(--pc-font-scale, 1));
	--pc-field-theme-background: transparent;
	--pc-field-theme-border: 1px solid var(--pc-color-outline);
	--pc-field-theme-border-bottom: 1px solid var(--pc-color-outline);
	--pc-field-theme-radius: var(--pc-shape-corner-small);
	--pc-field-theme-focus-shadow: inset 0 0 0 1px var(--pc-color-primary);
	--pc-field-theme-error-shadow: inset 0 0 0 1px var(--pc-color-error);
	--pc-surface-inset-shadow: none;
	--pc-card-background: var(--pc-color-surface-container-low);
	--pc-card-elevated-border-color: transparent;
	--pc-overlay-border: 0 solid transparent;
	--pc-card-radius: var(--pc-shape-corner-medium);
	--pc-card-header-border: 0 solid transparent;
	--pc-card-actions-border: 0 solid transparent;
	--pc-button-radius: var(--pc-shape-corner-full);
	--pc-button-filled-border: 0 solid transparent;
	--pc-button-filled-shadow: none;
	--pc-button-tonal-color: var(--pc-color-on-secondary-container);
	--pc-button-tonal-background: var(--pc-color-secondary-container);
	--pc-button-tonal-border: 0 solid transparent;
	--pc-button-elevated-border: 0 solid transparent;
	--pc-button-outlined-background: transparent;
	--pc-icon-button-radius: var(--pc-shape-corner-full);
	--pc-icon-button-background: transparent;
	--pc-icon-button-border: 0 solid transparent;
	--pc-segmented-radius: var(--pc-shape-corner-full);
	--pc-alert-radius: var(--pc-shape-corner-medium);
	--pc-alert-border: 0 solid transparent;
	--pc-alert-accent-width: 0;
	--pc-alert-info-color: var(--pc-color-on-info-container);
	--pc-alert-info-background: var(--pc-color-info-container);
	--pc-alert-success-color: var(--pc-color-on-success-container);
	--pc-alert-success-background: var(--pc-color-success-container);
	--pc-alert-warning-color: var(--pc-color-on-warning-container);
	--pc-alert-warning-background: var(--pc-color-warning-container);
	--pc-alert-error-color: var(--pc-color-on-error-container);
	--pc-alert-error-background: var(--pc-color-error-container);
	--pc-chip-radius: var(--pc-shape-corner-small);
	--pc-chip-background: transparent;
	--pc-chip-border-color: var(--pc-color-outline);
	--pc-nav-link-radius: var(--pc-shape-corner-full);
	--pc-nav-link-active-color: var(--pc-color-on-secondary-container);
	--pc-nav-link-active-background: var(--pc-color-secondary-container);
	--pc-nav-link-active-shadow: none;
	/* App bar geometry. Hosts read --pc-app-bar-height to offset content under a fixed or
	   sticky bar and a clipped drawer reads it for its top edge, so override it here (on the
	   theme root) rather than on the bar itself. */
	--pc-app-bar-height: calc(var(--pc-density-control-large) + var(--pc-density-space-lg));
	--pc-app-bar-dense-height: var(--pc-density-control-large);
	--pc-menu-background: var(--pc-color-surface-container);
	--pc-menu-border: var(--pc-overlay-border);
	--pc-menu-radius: var(--pc-shape-corner-extra-small);
	--pc-menu-item-hover: var(--pc-color-surface-container-high);
	--pc-dialog-background: var(--pc-color-surface-container-high);
	/* A hairline that keeps a dialog's edge defined where the shadow barely reads (tinted pages, dark mode).
	   It sits between the dialog's tone and the scrim-dimmed page: outline here, outline-variant in dark
	   mode, where outline-variant is the tone that does that. Declared on every theme root so a nested
	   theme resolves its own. */
	--pc-dialog-border: 1px solid var(--pc-color-outline);
	--pc-dialog-radius: var(--pc-shape-corner-extra-large);
	--pc-dialog-header-border: 0 solid transparent;
	--pc-dialog-actions-border: 0 solid transparent;
	/* No rule between header and content, so the header's own bottom padding is the whole gap. */
	--pc-dialog-content-space: 0rem;
	--pc-data-grid-header-background: var(--pc-color-surface-container);
	--pc-kanban-column-background: var(--pc-color-surface-container-low);
	--pc-kanban-column-border: 1px solid var(--pc-color-outline-variant);
	--pc-kanban-column-radius: var(--pc-shape-corner-large);
	--pc-kanban-card-background: var(--pc-color-surface-container-lowest);
	--pc-kanban-card-border: 1px solid var(--pc-color-outline-variant);
	--pc-kanban-card-radius: var(--pc-shape-corner-medium);
	--pc-kanban-card-shadow: var(--pc-elevation-level-1);
	/*
	 * Stacking layers for surfaces that paint above the page. Ordered
	 * docked drawer < app bar < modal drawer < menu < tooltip < overlay
	 * < dialog < popover < snackbar. Hosts whose own fixed chrome uses other
	 * values may override these on the theme root (for example
	 * .pc-theme { --pc-z-dialog: 1400; }). The app bar token is for host
	 * layouts that make a PlatformAppBar sticky or fixed: a docked drawer sits
	 * below it, while a modal drawer and its scrim (one below the drawer)
	 * cover it. The popover layer is used by open fields (select, multi-select,
	 * autocomplete, colour and date/time pickers, the data grid's column
	 * filter) and the kanban card menu when they are not in the top layer: the
	 * dismiss layer sits at the token, the open field one above and its surface
	 * two above, so an open popover covers dialogs but stays under snackbars.
	 * A contained overlay (a busy state over a card or dialog) sits above
	 * the layers a component uses inside itself (sticky grid cells go up to
	 * 40) but below every page-level layer.
	 */
	--pc-z-overlay-contained: 45;
	--pc-z-drawer: 70;
	--pc-z-appbar: 72;
	--pc-z-drawer-modal: 78;
	--pc-z-menu: 80;
	--pc-z-tooltip: 85;
	--pc-z-overlay: 90;
	--pc-z-dialog: 91;
	--pc-z-popover: 95;
	--pc-z-snackbar: 100;

	font-family: var(--pc-typescale-font-family);
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface);
}

.pc-font-scale--small {
	--pc-font-scale: 0.875;
	font-size: calc(1rem * var(--pc-font-scale));
}

.pc-font-scale--medium {
	--pc-font-scale: 1;
	font-size: calc(1rem * var(--pc-font-scale));
}

.pc-font-scale--large {
	--pc-font-scale: 1.125;
	font-size: calc(1rem * var(--pc-font-scale));
}

.pc-density--compact {
	--pc-density-space-xs: calc(0.125rem * var(--pc-font-scale, 1));
	--pc-density-space-sm: calc(0.25rem * var(--pc-font-scale, 1));
	--pc-density-space-md: calc(0.5rem * var(--pc-font-scale, 1));
	--pc-density-space-lg: calc(0.75rem * var(--pc-font-scale, 1));
	--pc-density-space-xl: calc(1rem * var(--pc-font-scale, 1));
	--pc-density-control-small: calc(1.875rem * var(--pc-font-scale, 1));
	--pc-density-control-medium: calc(2.25rem * var(--pc-font-scale, 1));
	--pc-density-control-large: calc(2.75rem * var(--pc-font-scale, 1));
	--pc-density-field-height: calc(3rem * var(--pc-font-scale, 1));
	--pc-density-field-input-height: calc(2.875rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-block: calc(0.6875rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-inline: calc(0.75rem * var(--pc-font-scale, 1));
	--pc-density-row-height: calc(3rem * var(--pc-font-scale, 1));
	--pc-density-cell-padding-inline: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-density--standard {
	--pc-density-space-xs: calc(0.25rem * var(--pc-font-scale, 1));
	--pc-density-space-sm: calc(0.5rem * var(--pc-font-scale, 1));
	--pc-density-space-md: calc(0.75rem * var(--pc-font-scale, 1));
	--pc-density-space-lg: calc(1rem * var(--pc-font-scale, 1));
	--pc-density-space-xl: calc(1.5rem * var(--pc-font-scale, 1));
	--pc-density-control-small: calc(2rem * var(--pc-font-scale, 1));
	--pc-density-control-medium: calc(2.5rem * var(--pc-font-scale, 1));
	--pc-density-control-large: calc(3rem * var(--pc-font-scale, 1));
	--pc-density-field-height: calc(3.5rem * var(--pc-font-scale, 1));
	--pc-density-field-input-height: calc(3.375rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-block: calc(0.9375rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-inline: calc(1rem * var(--pc-font-scale, 1));
	--pc-density-row-height: calc(3.5rem * var(--pc-font-scale, 1));
	--pc-density-cell-padding-inline: calc(1rem * var(--pc-font-scale, 1));
}

.pc-density--comfortable {
	--pc-density-space-xs: calc(0.375rem * var(--pc-font-scale, 1));
	--pc-density-space-sm: calc(0.75rem * var(--pc-font-scale, 1));
	--pc-density-space-md: calc(1rem * var(--pc-font-scale, 1));
	--pc-density-space-lg: calc(1.25rem * var(--pc-font-scale, 1));
	--pc-density-space-xl: calc(2rem * var(--pc-font-scale, 1));
	--pc-density-control-small: calc(2.25rem * var(--pc-font-scale, 1));
	--pc-density-control-medium: calc(2.75rem * var(--pc-font-scale, 1));
	--pc-density-control-large: calc(3.25rem * var(--pc-font-scale, 1));
	--pc-density-field-height: calc(4rem * var(--pc-font-scale, 1));
	--pc-density-field-input-height: calc(3.875rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-block: calc(1.1875rem * var(--pc-font-scale, 1));
	--pc-density-field-padding-inline: calc(1.25rem * var(--pc-font-scale, 1));
	--pc-density-row-height: calc(4rem * var(--pc-font-scale, 1));
	--pc-density-cell-padding-inline: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-theme[data-field-variant="outlined"] {
	--pc-field-theme-background: transparent;
	--pc-field-theme-border: 1px solid var(--pc-color-outline);
	--pc-field-theme-border-bottom: 1px solid var(--pc-color-outline);
	--pc-field-theme-radius: var(--pc-shape-corner-small);
	--pc-field-theme-focus-shadow: inset 0 0 0 1px var(--pc-color-primary);
	--pc-field-theme-error-shadow: inset 0 0 0 1px var(--pc-color-error);
}

.pc-theme[data-field-variant="filled"] {
	--pc-field-theme-background: var(--pc-color-surface-container-highest);
	--pc-field-theme-border: 0;
	--pc-field-theme-border-bottom: 1px solid var(--pc-color-on-surface-variant);
	--pc-field-theme-radius: var(--pc-shape-corner-extra-small) var(--pc-shape-corner-extra-small) 0 0;
	--pc-field-theme-focus-shadow: inset 0 -2px var(--pc-color-primary);
	--pc-field-theme-error-shadow: inset 0 -1px var(--pc-color-error);
}

.pc-theme--dark,
[data-theme="dark"] {
	color-scheme: dark;
	/* Tooltip container: a lifted mid-tone over the dark surfaces (see the light declaration). */
	--pc-color-tooltip-container: color-mix(in srgb, var(--pc-color-on-surface) 36%, var(--pc-color-surface));
	--pc-color-on-tooltip-container: color-mix(in srgb, var(--pc-color-on-surface) 50%, #ffffff);
	/* The dark scheme's light role tones already clear 3:1 on it. */
	--pc-tooltip-role-weight: 100%;
	--pc-dialog-border: 1px solid var(--pc-color-outline-variant);
	--md-sys-color-primary: #d0bcff;
	--md-sys-color-on-primary: #381e72;
	--md-sys-color-primary-container: #4f378b;
	--md-sys-color-on-primary-container: #eaddff;
	--md-sys-color-secondary: #ccc2dc;
	--md-sys-color-on-secondary: #332d41;
	--md-sys-color-secondary-container: #4a4458;
	--md-sys-color-on-secondary-container: #e8def8;
	--md-sys-color-tertiary: #efb8c8;
	--md-sys-color-on-tertiary: #492532;
	--md-sys-color-tertiary-container: #633b48;
	--md-sys-color-on-tertiary-container: #ffd8e4;
	--md-sys-color-error: #f2b8b5;
	--md-sys-color-on-error: #601410;
	--md-sys-color-error-container: #8c1d18;
	--md-sys-color-on-error-container: #f9dedc;
	--md-sys-color-surface: #141218;
	--md-sys-color-on-surface: #e6e0e9;
	--md-sys-color-surface-variant: #49454f;
	--md-sys-color-on-surface-variant: #cac4d0;
	--md-sys-color-surface-container-lowest: #0f0d13;
	--md-sys-color-surface-container-low: #1d1b20;
	--md-sys-color-surface-container: #211f26;
	--md-sys-color-surface-container-high: #2b2930;
	--md-sys-color-surface-container-highest: #36343b;
	--md-sys-color-outline: #938f99;
	--md-sys-color-outline-variant: #49454f;
	--md-sys-color-inverse-surface: #e6e0e9;
	--md-sys-color-inverse-on-surface: #322f35;
	--md-sys-color-success: #9cd67d;
	--md-sys-color-on-success: #123800;
	--md-sys-color-success-container: #205107;
	--md-sys-color-on-success-container: #b7f397;
	--md-sys-color-warning: #f6be38;
	--md-sys-color-on-warning: #402d00;
	--md-sys-color-warning-container: #5c4300;
	--md-sys-color-on-warning-container: #ffdf91;
	--md-sys-color-info: #9ecaff;
	--md-sys-color-on-info: #003258;
	--md-sys-color-info-container: #00497d;
	--md-sys-color-on-info-container: #d1e4ff;
	--pc-code-property: #9cdcfe;
	--pc-code-element: #569cd6;
	--pc-code-attribute: #9cdcfe;
	--pc-code-string: #ce9178;
	--pc-code-number: #b5cea8;
	--pc-code-keyword: #569cd6;
	--pc-code-comment: #6a9955;
	--pc-code-tag: #c586c0;
}

.pc-theme--light,
[data-theme="light"],
.pc-theme--system,
[data-theme="system"] {
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	.pc-theme--system,
	[data-theme="system"] {
		color-scheme: dark;
		/* Tooltip container: a lifted mid-tone over the dark surfaces (see the light declaration). */
		--pc-color-tooltip-container: color-mix(in srgb, var(--pc-color-on-surface) 36%, var(--pc-color-surface));
		--pc-color-on-tooltip-container: color-mix(in srgb, var(--pc-color-on-surface) 50%, #ffffff);
		/* The dark scheme's light role tones already clear 3:1 on it. */
		--pc-tooltip-role-weight: 100%;
		--pc-dialog-border: 1px solid var(--pc-color-outline-variant);
		--md-sys-color-primary: #d0bcff;
		--md-sys-color-on-primary: #381e72;
		--md-sys-color-primary-container: #4f378b;
		--md-sys-color-on-primary-container: #eaddff;
		--md-sys-color-secondary: #ccc2dc;
		--md-sys-color-on-secondary: #332d41;
		--md-sys-color-secondary-container: #4a4458;
		--md-sys-color-on-secondary-container: #e8def8;
		--md-sys-color-tertiary: #efb8c8;
		--md-sys-color-on-tertiary: #492532;
		--md-sys-color-tertiary-container: #633b48;
		--md-sys-color-on-tertiary-container: #ffd8e4;
		--md-sys-color-error: #f2b8b5;
		--md-sys-color-on-error: #601410;
		--md-sys-color-error-container: #8c1d18;
		--md-sys-color-on-error-container: #f9dedc;
		--md-sys-color-surface: #141218;
		--md-sys-color-on-surface: #e6e0e9;
		--md-sys-color-surface-variant: #49454f;
		--md-sys-color-on-surface-variant: #cac4d0;
		--md-sys-color-surface-container-lowest: #0f0d13;
		--md-sys-color-surface-container-low: #1d1b20;
		--md-sys-color-surface-container: #211f26;
		--md-sys-color-surface-container-high: #2b2930;
		--md-sys-color-surface-container-highest: #36343b;
		--md-sys-color-outline: #938f99;
		--md-sys-color-outline-variant: #49454f;
		--md-sys-color-inverse-surface: #e6e0e9;
		--md-sys-color-inverse-on-surface: #322f35;
		--md-sys-color-success: #9cd67d;
		--md-sys-color-on-success: #123800;
		--md-sys-color-success-container: #205107;
		--md-sys-color-on-success-container: #b7f397;
		--md-sys-color-warning: #f6be38;
		--md-sys-color-on-warning: #402d00;
		--md-sys-color-warning-container: #5c4300;
		--md-sys-color-on-warning-container: #ffdf91;
		--md-sys-color-info: #9ecaff;
		--md-sys-color-on-info: #003258;
		--md-sys-color-info-container: #00497d;
		--md-sys-color-on-info-container: #d1e4ff;
		--pc-code-property: #9cdcfe;
		--pc-code-element: #569cd6;
		--pc-code-attribute: #9cdcfe;
		--pc-code-string: #ce9178;
		--pc-code-number: #b5cea8;
		--pc-code-keyword: #569cd6;
		--pc-code-comment: #6a9955;
		--pc-code-tag: #c586c0;
	}

	.pc-theme[data-theme="system"] .pc-divider {
		background: var(--pc-divider-color-dark, var(--pc-divider-color-light, var(--pc-color-outline-variant)));
	}

	.pc-theme[data-theme="system"] .pc-image--theme-aware .pc-image__source--light {
		display: none;
	}

	.pc-theme[data-theme="system"] .pc-image__source--dark {
		display: block !important;
	}
}

/*
 * Material 3 seed palettes used by white-label hosts. The default purple
 * palette is declared above. Each preset supplies complete primary,
 * secondary and tertiary role pairs rather than changing a single accent.
 */
.pc-scheme--blue {
	--md-sys-color-primary: #415f91;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #d6e3ff;
	--md-sys-color-on-primary-container: #001b3e;
	--md-sys-color-secondary: #565f71;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #dae2f9;
	--md-sys-color-on-secondary-container: #131c2b;
	--md-sys-color-tertiary: #705575;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #fad8fd;
	--md-sys-color-on-tertiary-container: #28132e;
}

.pc-theme--dark.pc-scheme--blue {
	--md-sys-color-primary: #aac7ff;
	--md-sys-color-on-primary: #0a305f;
	--md-sys-color-primary-container: #284777;
	--md-sys-color-on-primary-container: #d6e3ff;
	--md-sys-color-secondary: #bec6dc;
	--md-sys-color-on-secondary: #283141;
	--md-sys-color-secondary-container: #3e4759;
	--md-sys-color-on-secondary-container: #dae2f9;
	--md-sys-color-tertiary: #ddbce0;
	--md-sys-color-on-tertiary: #3f2844;
	--md-sys-color-tertiary-container: #573e5c;
	--md-sys-color-on-tertiary-container: #fad8fd;
}

.pc-scheme--teal {
	--md-sys-color-primary: #006a60;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #9ef2e4;
	--md-sys-color-on-primary-container: #00201c;
	--md-sys-color-secondary: #4a635f;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #cce8e2;
	--md-sys-color-on-secondary-container: #06201c;
	--md-sys-color-tertiary: #456179;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #cce5ff;
	--md-sys-color-on-tertiary-container: #001e30;
}

.pc-theme--dark.pc-scheme--teal {
	--md-sys-color-primary: #82d5c9;
	--md-sys-color-on-primary: #003731;
	--md-sys-color-primary-container: #005048;
	--md-sys-color-on-primary-container: #9ef2e4;
	--md-sys-color-secondary: #b0ccc6;
	--md-sys-color-on-secondary: #1b3530;
	--md-sys-color-secondary-container: #324b47;
	--md-sys-color-on-secondary-container: #cce8e2;
	--md-sys-color-tertiary: #adc9e6;
	--md-sys-color-on-tertiary: #153349;
	--md-sys-color-tertiary-container: #2d4960;
	--md-sys-color-on-tertiary-container: #cce5ff;
}

.pc-scheme--green {
	--md-sys-color-primary: #406836;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #c1efad;
	--md-sys-color-on-primary-container: #052100;
	--md-sys-color-secondary: #53634e;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #d7e8ce;
	--md-sys-color-on-secondary-container: #111f0f;
	--md-sys-color-tertiary: #386568;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #bcebed;
	--md-sys-color-on-tertiary-container: #002021;
}

.pc-theme--dark.pc-scheme--green {
	--md-sys-color-primary: #a6d393;
	--md-sys-color-on-primary: #12380b;
	--md-sys-color-primary-container: #285020;
	--md-sys-color-on-primary-container: #c1efad;
	--md-sys-color-secondary: #bbcbb2;
	--md-sys-color-on-secondary: #263422;
	--md-sys-color-secondary-container: #3c4b37;
	--md-sys-color-on-secondary-container: #d7e8ce;
	--md-sys-color-tertiary: #a0cfd1;
	--md-sys-color-on-tertiary: #003739;
	--md-sys-color-tertiary-container: #1f4d50;
	--md-sys-color-on-tertiary-container: #bcebed;
}

.pc-scheme--orange {
	--md-sys-color-primary: #8a5100;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #ffdcbe;
	--md-sys-color-on-primary-container: #2c1600;
	--md-sys-color-secondary: #735943;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #ffdcbe;
	--md-sys-color-on-secondary-container: #2a1708;
	--md-sys-color-tertiary: #5c6300;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #e1e88f;
	--md-sys-color-on-tertiary-container: #1a1d00;
}

.pc-theme--dark.pc-scheme--orange {
	--md-sys-color-primary: #ffb86f;
	--md-sys-color-on-primary: #492900;
	--md-sys-color-primary-container: #683c00;
	--md-sys-color-on-primary-container: #ffdcbe;
	--md-sys-color-secondary: #e2c1a6;
	--md-sys-color-on-secondary: #412c1a;
	--md-sys-color-secondary-container: #59422f;
	--md-sys-color-on-secondary-container: #ffdcbe;
	--md-sys-color-tertiary: #c5cc75;
	--md-sys-color-on-tertiary: #303300;
	--md-sys-color-tertiary-container: #464b00;
	--md-sys-color-on-tertiary-container: #e1e88f;
}

.pc-scheme--red {
	--md-sys-color-primary: #904a43;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #ffdad6;
	--md-sys-color-on-primary-container: #3b0907;
	--md-sys-color-secondary: #775652;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #ffdad6;
	--md-sys-color-on-secondary-container: #2c1513;
	--md-sys-color-tertiary: #725b2e;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #ffdea6;
	--md-sys-color-on-tertiary-container: #261900;
}

.pc-theme--dark.pc-scheme--red {
	--md-sys-color-primary: #ffb4ab;
	--md-sys-color-on-primary: #561e1a;
	--md-sys-color-primary-container: #73332d;
	--md-sys-color-on-primary-container: #ffdad6;
	--md-sys-color-secondary: #e7bdb7;
	--md-sys-color-on-secondary: #442926;
	--md-sys-color-secondary-container: #5d3f3b;
	--md-sys-color-on-secondary-container: #ffdad6;
	--md-sys-color-tertiary: #e2c28c;
	--md-sys-color-on-tertiary: #402d04;
	--md-sys-color-tertiary-container: #594419;
	--md-sys-color-on-tertiary-container: #ffdea6;
}

@media (prefers-color-scheme: dark) {
	.pc-theme--system.pc-scheme--blue {
		--md-sys-color-primary: #aac7ff;
		--md-sys-color-on-primary: #0a305f;
		--md-sys-color-primary-container: #284777;
		--md-sys-color-on-primary-container: #d6e3ff;
		--md-sys-color-secondary: #bec6dc;
		--md-sys-color-on-secondary: #283141;
		--md-sys-color-secondary-container: #3e4759;
		--md-sys-color-on-secondary-container: #dae2f9;
		--md-sys-color-tertiary: #ddbce0;
		--md-sys-color-on-tertiary: #3f2844;
		--md-sys-color-tertiary-container: #573e5c;
		--md-sys-color-on-tertiary-container: #fad8fd;
	}

	.pc-theme--system.pc-scheme--teal {
		--md-sys-color-primary: #82d5c9;
		--md-sys-color-on-primary: #003731;
		--md-sys-color-primary-container: #005048;
		--md-sys-color-on-primary-container: #9ef2e4;
		--md-sys-color-secondary: #b0ccc6;
		--md-sys-color-on-secondary: #1b3530;
		--md-sys-color-secondary-container: #324b47;
		--md-sys-color-on-secondary-container: #cce8e2;
		--md-sys-color-tertiary: #adc9e6;
		--md-sys-color-on-tertiary: #153349;
		--md-sys-color-tertiary-container: #2d4960;
		--md-sys-color-on-tertiary-container: #cce5ff;
	}

	.pc-theme--system.pc-scheme--green {
		--md-sys-color-primary: #a6d393;
		--md-sys-color-on-primary: #12380b;
		--md-sys-color-primary-container: #285020;
		--md-sys-color-on-primary-container: #c1efad;
		--md-sys-color-secondary: #bbcbb2;
		--md-sys-color-on-secondary: #263422;
		--md-sys-color-secondary-container: #3c4b37;
		--md-sys-color-on-secondary-container: #d7e8ce;
		--md-sys-color-tertiary: #a0cfd1;
		--md-sys-color-on-tertiary: #003739;
		--md-sys-color-tertiary-container: #1f4d50;
		--md-sys-color-on-tertiary-container: #bcebed;
	}

	.pc-theme--system.pc-scheme--orange {
		--md-sys-color-primary: #ffb86f;
		--md-sys-color-on-primary: #492900;
		--md-sys-color-primary-container: #683c00;
		--md-sys-color-on-primary-container: #ffdcbe;
		--md-sys-color-secondary: #e2c1a6;
		--md-sys-color-on-secondary: #412c1a;
		--md-sys-color-secondary-container: #59422f;
		--md-sys-color-on-secondary-container: #ffdcbe;
		--md-sys-color-tertiary: #c5cc75;
		--md-sys-color-on-tertiary: #303300;
		--md-sys-color-tertiary-container: #464b00;
		--md-sys-color-on-tertiary-container: #e1e88f;
	}

	.pc-theme--system.pc-scheme--red {
		--md-sys-color-primary: #ffb4ab;
		--md-sys-color-on-primary: #561e1a;
		--md-sys-color-primary-container: #73332d;
		--md-sys-color-on-primary-container: #ffdad6;
		--md-sys-color-secondary: #e7bdb7;
		--md-sys-color-on-secondary: #442926;
		--md-sys-color-secondary-container: #5d3f3b;
		--md-sys-color-on-secondary-container: #ffdad6;
		--md-sys-color-tertiary: #e2c28c;
		--md-sys-color-on-tertiary: #402d04;
		--md-sys-color-tertiary-container: #594419;
		--md-sys-color-on-tertiary-container: #ffdea6;
	}
}

/*
 * Refined is the first library-owned alternative to Material 3. It deliberately
 * keeps density, font scale and control metrics unchanged: the adapter alters
 * neutral layers, line hierarchy, typography emphasis, shape and elevation.
 * White-label primary/secondary/tertiary roles continue to come from the active
 * colour scheme.
 */
.pc-theme[data-design-language="refined"] {
	--pc-color-surface: #f7f8fa;
	--pc-color-on-surface: #1c2026;
	--pc-color-surface-variant: #e6e9ed;
	--pc-color-on-surface-variant: #545c67;
	--pc-color-surface-container-lowest: #ffffff;
	--pc-color-surface-container-low: #fbfcfd;
	--pc-color-surface-container: #f1f3f5;
	--pc-color-surface-container-high: #e9ecef;
	--pc-color-surface-container-highest: #e1e5e9;
	--pc-color-outline: #69727e;
	--pc-color-outline-variant: #d4d9df;
	--pc-color-inverse-surface: #252a31;
	--pc-color-inverse-on-surface: #f3f5f7;
	--pc-shape-corner-extra-small: calc(0.375rem * var(--pc-font-scale, 1));
	--pc-shape-corner-small: calc(0.625rem * var(--pc-font-scale, 1));
	--pc-shape-corner-medium: calc(0.875rem * var(--pc-font-scale, 1));
	--pc-shape-corner-large: calc(1.125rem * var(--pc-font-scale, 1));
	--pc-shape-corner-extra-large: calc(1.5rem * var(--pc-font-scale, 1));
	--pc-shape-corner-full: calc(0.875rem * var(--pc-font-scale, 1));
	--pc-elevation-level-0: none;
	--pc-elevation-level-1:
		0 1px 2px rgb(15 23 42 / 0.08),
		0 4px 12px rgb(15 23 42 / 0.05);
	--pc-elevation-level-2:
		0 2px 4px rgb(15 23 42 / 0.08),
		0 10px 28px rgb(15 23 42 / 0.1);
	--pc-elevation-level-3:
		0 4px 8px rgb(15 23 42 / 0.1),
		0 18px 48px rgb(15 23 42 / 0.14);
	--pc-motion-duration-short: 140ms;
	--pc-motion-duration-medium: 220ms;
	--pc-motion-easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--pc-typescale-font-family: var(
		--pc-brand-font-family,
		"Segoe UI Variable Text",
		"Segoe UI",
		system-ui,
		sans-serif);
	--pc-typescale-heading-weight: 600;
	--pc-typescale-heading-letter-spacing: -0.02em;
	--pc-typescale-display-large-letter-spacing: -0.02em;
	--pc-surface-inset-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--pc-color-outline-variant) 72%, transparent);
	--pc-card-background: var(--pc-color-surface-container-lowest);
	--pc-card-elevated-border-color: var(--pc-color-outline-variant);
	--pc-overlay-border: 1px solid var(--pc-color-outline-variant);
	--pc-card-radius: var(--pc-shape-corner-small);
	--pc-card-header-border: 1px solid var(--pc-color-outline-variant);
	--pc-card-actions-border: 1px solid var(--pc-color-outline-variant);
	--pc-button-radius: var(--pc-shape-corner-small);
	--pc-button-filled-border:
		1px solid color-mix(in srgb, var(--pc-color-primary) 72%, var(--pc-color-on-surface));
	--pc-button-filled-shadow: 0 1px 2px rgb(15 23 42 / 0.16);
	--pc-button-tonal-color: var(--pc-color-primary);
	--pc-button-tonal-background:
		color-mix(in srgb, var(--pc-color-primary) 10%, var(--pc-color-surface-container-lowest));
	--pc-button-tonal-border: 1px solid var(--pc-color-outline-variant);
	--pc-button-elevated-border: 1px solid var(--pc-color-outline-variant);
	--pc-button-outlined-background: var(--pc-color-surface-container-lowest);
	--pc-icon-button-radius: var(--pc-shape-corner-extra-small);
	--pc-icon-button-background: var(--pc-color-surface-container-lowest);
	--pc-icon-button-border: 1px solid var(--pc-color-outline-variant);
	--pc-segmented-radius: var(--pc-shape-corner-extra-small);
	--pc-alert-radius: var(--pc-shape-corner-extra-small);
	--pc-alert-border: 1px solid var(--pc-color-outline-variant);
	--pc-alert-accent-width: calc(0.25rem * var(--pc-font-scale, 1));
	--pc-alert-info-color: var(--pc-color-on-surface);
	--pc-alert-info-background: var(--pc-color-surface-container-lowest);
	--pc-alert-success-color: var(--pc-color-on-surface);
	--pc-alert-success-background: var(--pc-color-surface-container-lowest);
	--pc-alert-warning-color: var(--pc-color-on-surface);
	--pc-alert-warning-background: var(--pc-color-surface-container-lowest);
	--pc-alert-error-color: var(--pc-color-on-surface);
	--pc-alert-error-background: var(--pc-color-surface-container-lowest);
	--pc-chip-radius: var(--pc-shape-corner-extra-small);
	--pc-chip-background: var(--pc-color-surface-container-lowest);
	--pc-chip-border-color: var(--pc-color-outline-variant);
	--pc-nav-link-radius: var(--pc-shape-corner-extra-small);
	--pc-nav-link-active-color: var(--pc-color-primary);
	--pc-nav-link-active-background:
		color-mix(in srgb, var(--pc-color-primary) 9%, var(--pc-color-surface-container-lowest));
	--pc-nav-link-active-shadow:
		inset calc(0.1875rem * var(--pc-font-scale, 1)) 0 var(--pc-color-primary);
	--pc-menu-background: var(--pc-color-surface-container-lowest);
	--pc-menu-border: 1px solid var(--pc-color-outline-variant);
	--pc-menu-radius: var(--pc-shape-corner-small);
	--pc-menu-item-hover:
		color-mix(in srgb, var(--pc-color-primary) 8%, var(--pc-color-surface-container-lowest));
	--pc-dialog-background: var(--pc-color-surface-container-lowest);
	/* Refined keeps its overlay hairline (outline-variant) in both modes. */
	--pc-dialog-border: var(--pc-overlay-border);
	--pc-dialog-radius: var(--pc-shape-corner-large);
	--pc-dialog-header-border: 1px solid var(--pc-color-outline-variant);
	--pc-dialog-actions-border: 1px solid var(--pc-color-outline-variant);
	/* The rule lands at the end of the header's padding, so without this the first field sits
	   directly against it and the title looks glued to the form. */
	--pc-dialog-content-space: 1.25rem;
	--pc-data-grid-header-background: var(--pc-color-surface-container-low);
	--pc-kanban-column-background: var(--pc-color-surface-container);
	--pc-kanban-column-radius: var(--pc-shape-corner-small);
	--pc-kanban-card-radius: var(--pc-shape-corner-small);
}

.pc-theme[data-design-language="refined"][data-theme="dark"] {
	--pc-color-surface: #111418;
	--pc-color-on-surface: #e7e9ec;
	--pc-color-surface-variant: #30353c;
	--pc-color-on-surface-variant: #bac0c8;
	--pc-color-surface-container-lowest: #0b0d10;
	--pc-color-surface-container-low: #171a1f;
	--pc-color-surface-container: #1c2026;
	--pc-color-surface-container-high: #252a31;
	--pc-color-surface-container-highest: #2e343d;
	--pc-color-outline: #939ca8;
	--pc-color-outline-variant: #3c444e;
	--pc-color-inverse-surface: #e7e9ec;
	--pc-color-inverse-on-surface: #252a31;
}

@media (prefers-color-scheme: dark) {
	.pc-theme[data-design-language="refined"][data-theme="system"] {
		--pc-color-surface: #111418;
		--pc-color-on-surface: #e7e9ec;
		--pc-color-surface-variant: #30353c;
		--pc-color-on-surface-variant: #bac0c8;
		--pc-color-surface-container-lowest: #0b0d10;
		--pc-color-surface-container-low: #171a1f;
		--pc-color-surface-container: #1c2026;
		--pc-color-surface-container-high: #252a31;
		--pc-color-surface-container-highest: #2e343d;
		--pc-color-outline: #939ca8;
		--pc-color-outline-variant: #3c444e;
		--pc-color-inverse-surface: #e7e9ec;
		--pc-color-inverse-on-surface: #252a31;
	}
}

.pc-theme[data-design-language="refined"][data-field-variant="outlined"] {
	--pc-field-theme-background: var(--pc-color-surface-container-lowest);
	--pc-field-theme-border: 1px solid var(--pc-color-outline-variant);
	--pc-field-theme-border-bottom: 1px solid var(--pc-color-outline-variant);
	--pc-field-theme-radius: var(--pc-shape-corner-small);
	--pc-field-theme-focus-shadow:
		0 0 0 calc(0.1875rem * var(--pc-font-scale, 1))
			color-mix(in srgb, var(--pc-color-primary) 16%, transparent),
		inset 0 0 0 1px var(--pc-color-primary);
}

/*
 * Expressive is the library's Material 3 Expressive adapter: spring-flavoured
 * motion, a rounder shape family with press shape-morphing, and emphasized
 * typography. It is deliberately colour-neutral — every colour role continues
 * to come from the active colour scheme axis, so white-label and generated
 * partner schemes work unchanged — and, like every adapter, it leaves density,
 * control metrics and layout geometry untouched. Spatial springs are the
 * published web-curve equivalents of the M3 expressive motion springs; effects
 * transitions (colour, opacity, elevation) keep overshoot-free curves.
 */
.pc-theme[data-design-language="expressive"] {
	--pc-motion-spatial-fast-easing: cubic-bezier(0.42, 1.67, 0.21, 0.9);
	--pc-motion-spatial-fast-duration: 350ms;
	--pc-motion-spatial-default-easing: cubic-bezier(0.38, 1.21, 0.22, 1);
	--pc-motion-spatial-default-duration: 500ms;
	--pc-motion-spatial-slow-easing: cubic-bezier(0.39, 1.29, 0.35, 0.98);
	--pc-motion-spatial-slow-duration: 650ms;
	--pc-motion-duration-short: var(--pc-motion-effects-fast-duration);
	--pc-motion-duration-medium: var(--pc-motion-effects-slow-duration);
	--pc-motion-easing-standard: var(--pc-motion-effects-default-easing);
	--pc-shape-corner-extra-small: calc(0.5rem * var(--pc-font-scale, 1));
	--pc-shape-corner-small: calc(0.75rem * var(--pc-font-scale, 1));
	--pc-shape-corner-medium: calc(1rem * var(--pc-font-scale, 1));
	--pc-shape-corner-large: calc(1.25rem * var(--pc-font-scale, 1));
	--pc-shape-corner-extra-large: calc(2rem * var(--pc-font-scale, 1));
	--pc-typescale-heading-weight: 600;
	--pc-typescale-heading-letter-spacing: -0.01em;
	--pc-typescale-display-large-letter-spacing: -0.02em;
	--pc-card-radius: var(--pc-shape-corner-large);
	--pc-menu-radius: var(--pc-shape-corner-medium);
	--pc-alert-radius: var(--pc-shape-corner-large);
	--pc-chip-radius: var(--pc-shape-corner-small);
}

/*
 * Round controls rest on finite radii under Expressive so the press morph is
 * visible across its whole spring. Animating from the corner-full token
 * (an effectively unclamped length) spends most of the curve above the
 * rendered half-size clamp, which reads as a delayed snap instead of a morph.
 * Buttons use half their size-variant control height (the true pill radius);
 * icon buttons are square, so 50% is the identical circle.
 */
.pc-theme[data-design-language="expressive"] .pc-button {
	border-radius: calc(var(--pc-density-control-medium) / 2);
}

.pc-theme[data-design-language="expressive"] .pc-button--small {
	border-radius: calc(var(--pc-density-control-small) / 2);
}

.pc-theme[data-design-language="expressive"] .pc-button--large {
	border-radius: calc(var(--pc-density-control-large) / 2);
}

.pc-theme[data-design-language="expressive"] .pc-icon-button {
	border-radius: 50%;
}

/*
 * Press shape-morph: interactive controls soften towards a squarer radius and
 * compress slightly while pressed, riding the spatial spring so the release
 * lands with a gentle overshoot. border-radius and transform do not affect
 * layout, preserving the adapter geometry contract. The stylesheet's global
 * prefers-reduced-motion clamp neutralises these transitions wholesale.
 */
.pc-theme[data-design-language="expressive"] .pc-button,
.pc-theme[data-design-language="expressive"] .pc-icon-button,
.pc-theme[data-design-language="expressive"] .pc-fab,
.pc-theme[data-design-language="expressive"] .pc-segmented-button__item {
	transition:
		background var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		box-shadow var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		color var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		border-radius var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing),
		transform var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
}

.pc-theme[data-design-language="expressive"] .pc-button:active:not(:disabled, [aria-disabled="true"]),
.pc-theme[data-design-language="expressive"] .pc-fab:active:not(:disabled, [aria-disabled="true"]) {
	border-radius: var(--pc-shape-corner-small);
	transform: scale(0.98);
}

.pc-theme[data-design-language="expressive"] .pc-icon-button:active:not(:disabled, [aria-disabled="true"]) {
	border-radius: var(--pc-shape-corner-extra-small);
	transform: scale(0.92);
}

.pc-theme[data-design-language="expressive"] .pc-segmented-button__item:active:not(:disabled) {
	transform: scale(0.97);
}

.pc-theme[data-design-language="expressive"] .pc-chip {
	transition:
		background-color var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		border-color var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		box-shadow var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		border-radius var(--pc-motion-spatial-default-duration) var(--pc-motion-spatial-default-easing);
}

/* The M3 Expressive selected-shape toggle: selected chips round out to pills.
   The pill radius is a finite length (at least half of every chip height) for
   the same visible-morph reason as the button radii above. */
.pc-theme[data-design-language="expressive"] .pc-chip--selected {
	border-radius: calc(1.25rem * var(--pc-font-scale, 1));
}

/*
 * Charts: the hovered, focused or selected datum pops slightly on the spatial
 * spring. Scaling is value-safe: bars grow across their width only, never
 * along the value axis, and circular segments scale about their own geometry
 * (fill-box) so they lift out of the ring. Separator strokes stay crisp under
 * the transform thanks to non-scaling-stroke.
 */
.pc-theme[data-design-language="expressive"] .pc-circular-chart__segment {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		opacity var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		filter var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		stroke-width var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		transform var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
}

.pc-theme[data-design-language="expressive"] .pc-circular-chart__segment:hover,
.pc-theme[data-design-language="expressive"] .pc-circular-chart__segment:focus-visible,
.pc-theme[data-design-language="expressive"] .pc-circular-chart__segment--selected {
	transform: scale(1.04);
}

.pc-theme[data-design-language="expressive"] .pc-axis-chart__bar {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		opacity var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		filter var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		transform var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
}

.pc-theme[data-design-language="expressive"] .pc-axis-chart__bar:hover,
.pc-theme[data-design-language="expressive"] .pc-axis-chart__bar:focus-visible {
	transform: scaleX(1.06);
}

.pc-theme[data-design-language="expressive"] .pc-bar-chart__bar {
	transform-origin: bottom center;
	transition: transform var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
}

.pc-theme[data-design-language="expressive"] .pc-bar-chart__item:hover .pc-bar-chart__bar,
.pc-theme[data-design-language="expressive"] .pc-bar-chart__item:focus-visible .pc-bar-chart__bar,
.pc-theme[data-design-language="expressive"] .pc-bar-chart__item--selected .pc-bar-chart__bar {
	transform: scaleX(1.08);
}

.pc-theme *,
.pc-theme *::before,
.pc-theme *::after {
	box-sizing: border-box;
}

.pc-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
}

.pc-icon--primary { color: var(--pc-color-primary); }
.pc-icon--secondary { color: var(--pc-color-secondary); }
.pc-icon--tertiary { color: var(--pc-color-tertiary); }
.pc-icon--neutral { color: var(--pc-color-on-surface-variant); }
.pc-icon--info { color: var(--pc-color-info); }
.pc-icon--success { color: var(--pc-color-success); }
.pc-icon--warning { color: var(--pc-color-warning); }
.pc-icon--error { color: var(--pc-color-error); }

.pc-text {
	margin-block: 0;
	color: inherit;
}

.pc-text[tabindex="-1"]:focus {
	outline: 0;
}

.pc-text--display-large { font-size: calc(3.5625rem * var(--pc-font-scale, 1)); line-height: calc(4rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-display-large-letter-spacing); }
.pc-text--display-medium { font-size: calc(2.8125rem * var(--pc-font-scale, 1)); line-height: calc(3.25rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-heading-letter-spacing); }
.pc-text--display-small { font-size: calc(2.25rem * var(--pc-font-scale, 1)); line-height: calc(2.75rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-heading-letter-spacing); }
.pc-text--headline-large { font-size: calc(2rem * var(--pc-font-scale, 1)); line-height: calc(2.5rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-heading-letter-spacing); }
.pc-text--headline-medium { font-size: calc(1.75rem * var(--pc-font-scale, 1)); line-height: calc(2.25rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-heading-letter-spacing); }
.pc-text--headline-small { font-size: calc(1.5rem * var(--pc-font-scale, 1)); line-height: calc(2rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-heading-letter-spacing); }
.pc-text--title-large { font-size: calc(1.375rem * var(--pc-font-scale, 1)); line-height: calc(1.75rem * var(--pc-font-scale, 1)); font-weight: var(--pc-typescale-heading-weight); letter-spacing: var(--pc-typescale-heading-letter-spacing); }
.pc-text--title-medium { font-size: calc(1rem * var(--pc-font-scale, 1)); line-height: calc(1.5rem * var(--pc-font-scale, 1)); font-weight: 500; letter-spacing: calc(0.009375rem * var(--pc-font-scale, 1)); }
.pc-text--title-small { font-size: calc(0.875rem * var(--pc-font-scale, 1)); line-height: calc(1.25rem * var(--pc-font-scale, 1)); font-weight: 500; letter-spacing: calc(0.00625rem * var(--pc-font-scale, 1)); }
.pc-text--body-large { font-size: calc(1rem * var(--pc-font-scale, 1)); line-height: calc(1.5rem * var(--pc-font-scale, 1)); font-weight: 400; letter-spacing: calc(0.03125rem * var(--pc-font-scale, 1)); }
.pc-text--body-medium { font-size: calc(0.875rem * var(--pc-font-scale, 1)); line-height: calc(1.25rem * var(--pc-font-scale, 1)); font-weight: 400; letter-spacing: calc(0.015625rem * var(--pc-font-scale, 1)); }
.pc-text--body-small { font-size: calc(0.75rem * var(--pc-font-scale, 1)); line-height: calc(1rem * var(--pc-font-scale, 1)); font-weight: 400; letter-spacing: calc(0.025rem * var(--pc-font-scale, 1)); }
.pc-text--label-large { font-size: calc(0.875rem * var(--pc-font-scale, 1)); line-height: calc(1.25rem * var(--pc-font-scale, 1)); font-weight: 500; letter-spacing: calc(0.00625rem * var(--pc-font-scale, 1)); }
.pc-text--label-medium { font-size: calc(0.75rem * var(--pc-font-scale, 1)); line-height: calc(1rem * var(--pc-font-scale, 1)); font-weight: 500; letter-spacing: calc(0.03125rem * var(--pc-font-scale, 1)); }
.pc-text--label-small { font-size: calc(0.6875rem * var(--pc-font-scale, 1)); line-height: calc(1rem * var(--pc-font-scale, 1)); font-weight: 500; letter-spacing: calc(0.03125rem * var(--pc-font-scale, 1)); }

/* PlatformText Typography="Inherit": no type-scale role, so even a heading element keeps the
   parent's font, size, weight and tracking. */
.pc-text--inherit { font: inherit; letter-spacing: inherit; }

/* Japanese and Chinese are set solid (ベタ組み, 密排): the type scale's Latin tracking, and the extra
   tracking that feature styles give small or uppercase labels, spread kana and ideographs apart. The
   page's lang (the user's UI language) decides; an element marked with another language keeps its own
   tracking. Tracking is declared on many component, scoped and inline styles, hence !important. */
:lang(ja),
:lang(zh) {
	letter-spacing: normal !important;
}

.pc-text--align-start { text-align: start; }
.pc-text--align-center { text-align: center; }
.pc-text--align-end { text-align: end; }
.pc-text--align-justify { text-align: justify; }

/* Semantic text colours (PlatformText Color) and the neutral emphasis levels (Emphasis). */
.pc-text--primary { color: var(--pc-color-primary); }
.pc-text--secondary { color: var(--pc-color-secondary); }
.pc-text--tertiary { color: var(--pc-color-tertiary); }
.pc-text--neutral { color: var(--pc-color-on-surface); }
.pc-text--info { color: var(--pc-color-info); }
.pc-text--success { color: var(--pc-color-success); }
.pc-text--warning { color: var(--pc-color-warning); }
.pc-text--error { color: var(--pc-color-error); }
.pc-text--muted { color: var(--pc-color-on-surface-variant); }
.pc-text--disabled { color: color-mix(in srgb, var(--pc-color-on-surface) 38%, transparent); }

.pc-text--gutter-bottom { margin-block-end: 0.35em; }
.pc-text--inline { display: inline; }
.pc-text--uppercase { text-transform: uppercase; }

.pc-surface {
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface);
	border-radius: var(--pc-shape-corner-large);
	box-shadow: var(--pc-surface-inset-shadow);
}

.pc-surface--surface-container-low { background: var(--pc-color-surface-container-low); }
.pc-surface--surface-container { background: var(--pc-color-surface-container); }
.pc-surface--surface-container-high { background: var(--pc-color-surface-container-high); }
.pc-surface--primary-container { color: var(--pc-color-on-primary-container); background: var(--pc-color-primary-container); }
.pc-surface--secondary-container { color: var(--pc-color-on-secondary-container); background: var(--pc-color-secondary-container); }
.pc-surface--tertiary-container { color: var(--pc-color-on-tertiary-container); background: var(--pc-color-tertiary-container); }
.pc-surface--error-container { color: var(--pc-color-on-error-container); background: var(--pc-color-error-container); }

/* PlatformSurface Elevation replaces the design language's inset hairline with a real shadow;
   Outlined and Square adjust the frame. */
.pc-surface--elevation-1 { box-shadow: var(--pc-elevation-level-1); }
.pc-surface--elevation-2 { box-shadow: var(--pc-elevation-level-2); }
.pc-surface--elevation-3 { box-shadow: var(--pc-elevation-level-3); }
.pc-surface--outlined { border: 1px solid var(--pc-color-outline-variant); }
.pc-surface--square { border-radius: 0; }

.pc-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-card-background);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-card-radius);
}

.pc-card--elevated {
	border-color: var(--pc-card-elevated-border-color);
	box-shadow: var(--pc-elevation-level-1);
}

.pc-card--elevation-2 { box-shadow: var(--pc-elevation-level-2); }
.pc-card--elevation-3 { box-shadow: var(--pc-elevation-level-3); }

.pc-card--outlined {
	border-color: var(--pc-color-outline-variant);
}

/* PlatformCard Outlined="false": no frame at all, even on a flat card. */
.pc-card--borderless {
	border: 0;
}

.pc-card--interactive {
	cursor: pointer;
	transition:
		background var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-card--interactive:hover {
	background: var(--pc-color-surface-container);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-card--interactive.pc-card--elevation-2:hover,
.pc-card--interactive.pc-card--elevation-3:hover {
	box-shadow: var(--pc-elevation-level-3);
}

.pc-card--interactive:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

/* Card padding follows the interface density (1rem and 0.5rem at Standard). */
.pc-card__header,
.pc-card__content,
.pc-card__actions {
	padding: var(--pc-density-space-lg);
}

.pc-card__header {
	padding-bottom: var(--pc-density-space-sm);
	border-bottom: var(--pc-card-header-border);
}

.pc-card__actions {
	display: flex;
	gap: var(--pc-density-space-sm);
	justify-content: flex-end;
	padding-top: var(--pc-density-space-sm);
	border-top: var(--pc-card-actions-border);
}

/* PlatformCard HeaderActions: the header content takes the free space and the actions sit at
   the end of the same row. */
.pc-card__header--with-actions {
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-card__header-content {
	flex: 1 1 auto;
	min-width: 0;
}

.pc-card__header-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	margin-inline-start: auto;
}

.pc-card--dense .pc-card__header,
.pc-card--dense .pc-card__content,
.pc-card--dense .pc-card__actions {
	padding: var(--pc-density-space-sm);
}

.pc-card--dense .pc-card__header {
	padding-bottom: var(--pc-density-space-xs);
}

.pc-card--dense .pc-card__actions {
	padding-top: var(--pc-density-space-xs);
}

.pc-stack {
	display: flex;
	gap: var(--pc-stack-gap);
	align-items: var(--pc-stack-align);
	justify-content: var(--pc-stack-justify);
	min-width: 0;
}

.pc-stack--row { flex-direction: row; }
.pc-stack--column { flex-direction: column; }
.pc-stack--wrap { flex-wrap: wrap; }
.pc-stack--stretch-items > * { flex-grow: 1; }

/*
 * Flex helpers for plain markup inside any flex row (PlatformStack, toolbars, card actions):
 * - .pc-spacer takes the free main-axis space, pushing the following items to the end.
 * - .pc-flex-break forces the following items onto a new line of a wrapping row.
 */
.pc-spacer { flex: 1 1 auto; }
.pc-flex-break { flex-basis: 100%; height: 0; }

/*
 * Filter row: the one layout for a set of filters, wherever it sits (a data grid's filter band and
 * filter sheet, a board's toolbar, a pane). Fields sit side by side at a standard width; to share a
 * line they give up a little of it, down to a minimum, and below that they wrap as whole fields.
 * Below two fields' width the row becomes one column of full-width fields. Tops align, so with every
 * label one line above its box the boxes on a line are level.
 *
 * - A field is detected at the row or one wrapper level down (a test-id div, a conditional block, a
 *   component's own div), so a PlatformGrid, PlatformStack or inline width around a field hides it
 *   from the row. Anything that is not a field (a summary, a button) keeps its natural size.
 * - The date range's minimum width stays above its own stacking threshold (19em of its control,
 *   below), so a date range that shares a line always shows Start and End side by side.
 * - The row is a size container, so its host must give it a definite width: it is width: 100%.
 * - The one-column threshold is two standard fields and a gap (2 x 20rem + 1rem). It is a fixed rem
 *   value because a container condition cannot read the font scale.
 */
.pc-filter-row {
	--pc-filter-field-width: calc(20rem * var(--pc-font-scale, 1));
	--pc-filter-field-min-width: calc(16rem * var(--pc-font-scale, 1));
	--pc-filter-date-range-width: calc(24rem * var(--pc-font-scale, 1));
	--pc-filter-date-range-min-width: calc(20rem * var(--pc-font-scale, 1));
	--pc-filter-date-time-range-width: calc(32rem * var(--pc-font-scale, 1));
	/* A field's label line (1.25rem) and the label-to-box gap (0.25rem). */
	--pc-filter-label-offset: calc(1.5rem * var(--pc-font-scale, 1));
	container: pc-filter-row / inline-size;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--pc-density-space-lg);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.pc-filter-row > * {
	/* A control with no label above it (a switch, a checkbox, a host's button) drops by this offset to
	   this height, so it is level with, and centred on, the field boxes. One column needs no offset. */
	--pc-filter-control-offset: var(--pc-filter-label-offset);
	--pc-filter-control-height: var(--pc-density-field-height);
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.pc-filter-row > :is(.pc-field, .pc-duration-field, :has(> :is(.pc-field, .pc-duration-field))) {
	--pc-filter-item-width: var(--pc-filter-field-width);
	--pc-filter-item-min-width: var(--pc-filter-field-min-width);
}

.pc-filter-row > :is(.pc-date-range, :has(> .pc-date-range)) {
	--pc-filter-item-width: var(--pc-filter-date-range-width);
	--pc-filter-item-min-width: var(--pc-filter-date-range-min-width);
}

/* A date-time range stacks below 30rem, so it keeps its whole width. */
.pc-filter-row > :is(.pc-date-time-range-picker, :has(> .pc-date-time-range-picker)) {
	--pc-filter-item-width: var(--pc-filter-date-time-range-width);
	--pc-filter-item-min-width: var(--pc-filter-date-time-range-width);
}

/* A field starts from its minimum width and grows to its standard width: a line holds as many fields
   as fit at their minimums, and they share its free space up to their standard widths, so a field
   wraps (whole) only when it would otherwise drop below its minimum. */
.pc-filter-row > :is(.pc-field, .pc-date-range, .pc-date-time-range-picker, .pc-duration-field, :has(> :is(.pc-field, .pc-date-range, .pc-date-time-range-picker, .pc-duration-field))) {
	flex: 1 1 var(--pc-filter-item-min-width);
	max-width: min(100%, var(--pc-filter-item-width));
}

/* A switch or checkbox has no label above it, so it sits level with, and centred on, the field boxes. */
.pc-filter-row > :is(.pc-choice, .pc-choice-row, :has(> :is(.pc-choice, .pc-choice-row))) {
	display: flex;
	align-items: center;
	min-height: var(--pc-filter-control-height);
	margin-block-start: var(--pc-filter-control-offset);
}

/* Too narrow for two standard fields side by side: one column of full-width fields. This covers a
   desktop side sheet, a phone's full sheet, a phone band and narrow panes. A date range in it stacks
   Start over End only when the row itself is narrower than the date range's own threshold. */
@container pc-filter-row (max-width: 40.9375rem) {
	.pc-filter-row > * {
		--pc-filter-control-offset: 0px;
		--pc-filter-control-height: var(--pc-density-control-large);
	}

	.pc-filter-row > :is(.pc-field, .pc-date-range, .pc-date-time-range-picker, .pc-duration-field, :has(> :is(.pc-field, .pc-date-range, .pc-date-time-range-picker, .pc-duration-field))) {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.pc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pc-grid-min)), 1fr));
	gap: var(--pc-grid-gap);
	min-width: 0;
}

.pc-grid-item {
	grid-column: span var(--pc-grid-span);
	min-width: 0;
}

/*
 * PlatformGrid Columns: a fixed column model (usually 12) laid out with wrapping flex so rows
 * can be justified and items without a span keep their content width. An item's width is its
 * share of the columns plus the gaps it covers. The current span resolves per breakpoint from
 * the item's own --pc-grid-{xs..xl} variables; the grid resets it so a nested grid never
 * inherits an outer item's span. With no span the width calc is invalid and falls back to auto.
 * The 0.02px keeps sub-pixel rounding from wrapping a row that exactly fills the columns.
 * Breakpoints: Sm 37.5rem (600px), Md 60rem (960px), Lg 80rem (1280px), Xl 120rem (1920px).
 */
.pc-grid--columns {
	--pc-grid-item-span: initial;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: var(--pc-grid-justify, flex-start);
}

.pc-grid--columns > .pc-grid-item {
	flex: 0 1 auto;
	max-width: 100%;
	width: calc(
		(100% - (var(--pc-grid-columns) - 1) * var(--pc-grid-gap)) * var(--pc-grid-item-span) / var(--pc-grid-columns)
		+ (var(--pc-grid-item-span) - 1) * var(--pc-grid-gap)
		- 0.02px);
}

.pc-grid--columns > .pc-grid-item--xs { --pc-grid-item-span: var(--pc-grid-xs); }

@media (min-width: 37.5rem) {
	.pc-grid--columns > .pc-grid-item--sm { --pc-grid-item-span: var(--pc-grid-sm); }
}

@media (min-width: 60rem) {
	.pc-grid--columns > .pc-grid-item--md { --pc-grid-item-span: var(--pc-grid-md); }
}

@media (min-width: 80rem) {
	.pc-grid--columns > .pc-grid-item--lg { --pc-grid-item-span: var(--pc-grid-lg); }
}

@media (min-width: 120rem) {
	.pc-grid--columns > .pc-grid-item--xl { --pc-grid-item-span: var(--pc-grid-xl); }
}

.pc-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-container--small { max-width: calc(37.5rem * var(--pc-font-scale, 1)); }
.pc-container--medium { max-width: calc(52.5rem * var(--pc-font-scale, 1)); }
.pc-container--large { max-width: calc(75rem * var(--pc-font-scale, 1)); }
.pc-container--extra-large { max-width: calc(90rem * var(--pc-font-scale, 1)); }
.pc-container--fluid { max-width: none; }

.pc-divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--pc-divider-color-light, var(--pc-color-outline-variant));
}

.pc-theme[data-theme="dark"] .pc-divider {
	background: var(--pc-divider-color-dark, var(--pc-divider-color-light, var(--pc-color-outline-variant)));
}

/* PlatformDivider Vertical: stretches to the height of a flex row, and is at least one line tall
   elsewhere. */
.pc-divider--vertical {
	display: inline-block;
	flex: 0 0 auto;
	align-self: stretch;
	width: 1px;
	height: auto;
	min-height: 1em;
	vertical-align: middle;
}

.pc-button,
.pc-icon-button,
.pc-fab,
.pc-segmented-button__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-density-space-sm);
	border: 0;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	letter-spacing: calc(0.00625rem * var(--pc-font-scale, 1));
	/* Link (Href) and label (For) presentations share the button look. */
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		color var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

/* Rich content (icon + text blocks) sits in a row, as MudButton's label did. */
.pc-button__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-density-space-sm);
	min-width: 0;
}

/*
 * Semantic colour roles for actions. A button's or icon button's Color, and every FAB's Color,
 * adds one of these classes. The variant rules below read the four roles with the variant's
 * design-language default as the fallback, so an action without a colour keeps its adapter
 * styling. Neutral is a grey action: on-surface-variant content, with the surface as its "on"
 * colour when filled.
 */
.pc-button--color-primary,
.pc-icon-button--color-primary,
.pc-fab--primary {
	--pc-action-color: var(--pc-color-primary);
	--pc-action-on-color: var(--pc-color-on-primary);
	--pc-action-container: var(--pc-color-primary-container);
	--pc-action-on-container: var(--pc-color-on-primary-container);
}

.pc-button--color-secondary,
.pc-icon-button--color-secondary,
.pc-fab--secondary {
	--pc-action-color: var(--pc-color-secondary);
	--pc-action-on-color: var(--pc-color-on-secondary);
	--pc-action-container: var(--pc-color-secondary-container);
	--pc-action-on-container: var(--pc-color-on-secondary-container);
}

.pc-button--color-tertiary,
.pc-icon-button--color-tertiary,
.pc-fab--tertiary {
	--pc-action-color: var(--pc-color-tertiary);
	--pc-action-on-color: var(--pc-color-on-tertiary);
	--pc-action-container: var(--pc-color-tertiary-container);
	--pc-action-on-container: var(--pc-color-on-tertiary-container);
}

.pc-button--color-neutral,
.pc-icon-button--color-neutral,
.pc-fab--neutral {
	--pc-action-color: var(--pc-color-on-surface-variant);
	--pc-action-on-color: var(--pc-color-surface);
	--pc-action-container: var(--pc-color-surface-container-highest);
	--pc-action-on-container: var(--pc-color-on-surface);
}

.pc-button--color-info,
.pc-icon-button--color-info,
.pc-fab--info {
	--pc-action-color: var(--pc-color-info);
	--pc-action-on-color: var(--pc-color-on-info);
	--pc-action-container: var(--pc-color-info-container);
	--pc-action-on-container: var(--pc-color-on-info-container);
}

.pc-button--color-success,
.pc-icon-button--color-success,
.pc-fab--success {
	--pc-action-color: var(--pc-color-success);
	--pc-action-on-color: var(--pc-color-on-success);
	--pc-action-container: var(--pc-color-success-container);
	--pc-action-on-container: var(--pc-color-on-success-container);
}

.pc-button--color-warning,
.pc-icon-button--color-warning,
.pc-fab--warning {
	--pc-action-color: var(--pc-color-warning);
	--pc-action-on-color: var(--pc-color-on-warning);
	--pc-action-container: var(--pc-color-warning-container);
	--pc-action-on-container: var(--pc-color-on-warning-container);
}

.pc-button--color-error,
.pc-icon-button--color-error,
.pc-fab--error {
	--pc-action-color: var(--pc-color-error);
	--pc-action-on-color: var(--pc-color-on-error);
	--pc-action-container: var(--pc-color-error-container);
	--pc-action-on-container: var(--pc-color-on-error-container);
}

.pc-button {
	min-height: var(--pc-density-control-medium);
	padding-inline: var(--pc-density-space-xl);
	border-radius: var(--pc-button-radius);
}

.pc-button--small { min-height: var(--pc-density-control-small); padding-inline: var(--pc-density-space-lg); }
.pc-button--large { min-height: var(--pc-density-control-large); padding-inline: calc(var(--pc-density-space-xl) + var(--pc-density-space-sm)); }
.pc-button--full-width { width: 100%; }

.pc-button--filled {
	--pc-action-foreground: var(--pc-action-on-color, var(--pc-color-on-primary));
	color: var(--pc-action-foreground);
	background: var(--pc-action-color, var(--pc-color-primary));
	border: var(--pc-button-filled-border);
	box-shadow: var(--pc-button-filled-shadow);
}

/* A coloured fill keeps an adapter's filled border (Refined draws one) in the same role. */
.pc-button--filled[class*="pc-button--color-"] {
	border-color: var(--pc-action-color);
}

.pc-button--tonal {
	--pc-action-foreground: var(--pc-action-on-container, var(--pc-button-tonal-color));
	color: var(--pc-action-foreground);
	background: var(--pc-action-container, var(--pc-button-tonal-background));
	border: var(--pc-button-tonal-border);
}

.pc-button--elevated {
	--pc-action-foreground: var(--pc-action-color, var(--pc-color-primary));
	color: var(--pc-action-foreground);
	background: var(--pc-color-surface-container-low);
	border: var(--pc-button-elevated-border);
	box-shadow: var(--pc-elevation-level-1);
}

.pc-button--outlined {
	--pc-action-foreground: var(--pc-action-color, var(--pc-color-primary));
	color: var(--pc-action-foreground);
	background: var(--pc-button-outlined-background);
	border: 1px solid var(--pc-action-color, var(--pc-color-outline));
}

.pc-button--text {
	--pc-action-foreground: var(--pc-action-color, var(--pc-color-primary));
	color: var(--pc-action-foreground);
	background: transparent;
	padding-inline: var(--pc-density-space-md);
}

.pc-button:hover:not(:disabled, [aria-disabled="true"]),
.pc-icon-button:hover:not(:disabled, [aria-disabled="true"]),
.pc-fab:hover:not(:disabled, [aria-disabled="true"]),
.pc-segmented-button__item:hover:not(:disabled) {
	filter: brightness(0.94);
}

/*
 * Link presentations (Href, and PlatformLink) keep their colour on hover. A host stylesheet's
 * a:hover rule (Bootstrap's is specificity 0,1,1) outranks the single-class colour rules and
 * would repaint the label, for example link blue on a filled primary button. Every colour rule
 * for these classes also sets --pc-action-foreground (an internal value, not a theming token)
 * for this rule to restore. :where(a) keeps it at 0,2,0, so contextual colour rules later in
 * this file still win.
 */
:where(a):is(.pc-button, .pc-icon-button, .pc-fab, .pc-link):hover {
	color: var(--pc-action-foreground);
}

/* A label presentation (For) shows the keyboard focus of the visually hidden control it
   activates, which sits immediately before it; not while the label is disabled. */
.pc-button:focus-visible,
.pc-icon-button:focus-visible,
.pc-fab:focus-visible,
.pc-segmented-button__item:focus-visible,
.pc-link:focus-visible,
input:focus-visible + label.pc-button:not([aria-disabled="true"]),
input:focus-visible + label.pc-icon-button:not([aria-disabled="true"]),
input:focus-visible + label.pc-fab:not([aria-disabled="true"]) {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

/* Link and label presentations have no native disabled state; they carry aria-disabled. */
.pc-button:disabled,
.pc-icon-button:disabled,
.pc-fab:disabled,
.pc-segmented-button__item:disabled,
.pc-button[aria-disabled="true"],
.pc-icon-button[aria-disabled="true"],
.pc-fab[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.38;
}

/* A loading link keeps its href so the click that started the work still navigates or downloads;
   a second pointer click is ignored until it finishes. */
a.pc-button[aria-busy="true"] {
	pointer-events: none;
}

.pc-button__spinner {
	width: calc(1.125rem * var(--pc-font-scale, 1));
	height: calc(1.125rem * var(--pc-font-scale, 1));
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: pc-spin 700ms linear infinite;
}

@keyframes pc-spin {
	to { transform: rotate(360deg); }
}

.pc-icon-button {
	width: var(--pc-density-control-medium);
	height: var(--pc-density-control-medium);
	padding: var(--pc-density-space-sm);
	--pc-action-foreground: var(--pc-action-color, var(--pc-color-on-surface-variant));
	color: var(--pc-action-foreground);
	background: var(--pc-icon-button-background);
	border: var(--pc-icon-button-border);
	border-radius: var(--pc-icon-button-radius);
}

/* The glyph follows the font scale with its control instead of keeping the 24px attribute size. */
.pc-icon-button > .pc-icon {
	width: calc(1.5rem * var(--pc-font-scale, 1));
	height: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-icon-button--small {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
	padding: var(--pc-density-space-xs);
}

.pc-icon-button--small > .pc-icon {
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-icon-button--large {
	width: var(--pc-density-control-large);
	height: var(--pc-density-control-large);
	padding: var(--pc-density-space-md);
}

/* Selected (a pressed standard toggle) and Tonal share the container fill; the variant rules
   that follow win over it for a selected Filled or Outlined toggle. */
.pc-icon-button--selected,
.pc-icon-button--tonal {
	--pc-action-foreground: var(--pc-action-on-container, var(--pc-color-on-secondary-container));
	color: var(--pc-action-foreground);
	background: var(--pc-action-container, var(--pc-color-secondary-container));
}

.pc-icon-button--filled {
	--pc-action-foreground: var(--pc-action-on-color, var(--pc-color-on-primary));
	color: var(--pc-action-foreground);
	background: var(--pc-action-color, var(--pc-color-primary));
	border-color: var(--pc-action-color, var(--pc-color-primary));
}

.pc-icon-button--outlined {
	border: 1px solid var(--pc-action-color, var(--pc-color-outline-variant));
}

/*
 * Material 3 toggles: an unselected filled or tonal toggle rests on a neutral container and
 * takes its fill when selected; a selected outlined toggle fills with its colour role, or the
 * inverse surface without one.
 */
.pc-icon-button--filled[aria-pressed="false"] {
	--pc-action-foreground: var(--pc-action-color, var(--pc-color-primary));
	color: var(--pc-action-foreground);
	background: var(--pc-color-surface-container-highest);
	border-color: var(--pc-color-surface-container-highest);
}

.pc-icon-button--tonal[aria-pressed="false"] {
	--pc-action-foreground: var(--pc-color-on-surface-variant);
	color: var(--pc-action-foreground);
	background: var(--pc-color-surface-container-highest);
}

.pc-icon-button--outlined.pc-icon-button--selected {
	--pc-action-foreground: var(--pc-action-on-color, var(--pc-color-inverse-on-surface));
	color: var(--pc-action-foreground);
	background: var(--pc-action-color, var(--pc-color-inverse-surface));
	border-color: var(--pc-action-color, var(--pc-color-inverse-surface));
}

/*
 * Material 3 FABs. Sizes are fixed (they follow the font scale but not density): Small 2.5rem
 * with a medium corner, Medium 3.5rem with a large corner and Large 6rem with an extra-large
 * corner and a 2.25rem glyph. Tonal (the default) uses the colour role's container; Filled uses
 * the role itself. A lowered FAB sits in content at elevation level 1.
 */
.pc-fab {
	min-width: calc(3.5rem * var(--pc-font-scale, 1));
	height: calc(3.5rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	--pc-action-foreground: var(--pc-action-on-container, var(--pc-color-on-primary-container));
	color: var(--pc-action-foreground);
	background: var(--pc-action-container, var(--pc-color-primary-container));
	border-radius: var(--pc-shape-corner-large);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-fab > .pc-icon {
	width: calc(1.5rem * var(--pc-font-scale, 1));
	height: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-fab--small {
	min-width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1));
	border-radius: var(--pc-shape-corner-medium);
}

.pc-fab--large {
	min-width: calc(6rem * var(--pc-font-scale, 1));
	height: calc(6rem * var(--pc-font-scale, 1));
	padding: calc(1.875rem * var(--pc-font-scale, 1));
	border-radius: var(--pc-shape-corner-extra-large);
}

.pc-fab--large > .pc-icon {
	width: calc(2.25rem * var(--pc-font-scale, 1));
	height: calc(2.25rem * var(--pc-font-scale, 1));
}

.pc-fab--filled {
	--pc-action-foreground: var(--pc-action-on-color, var(--pc-color-on-primary));
	color: var(--pc-action-foreground);
	background: var(--pc-action-color, var(--pc-color-primary));
}

.pc-fab--lowered {
	box-shadow: var(--pc-elevation-level-1);
}

.pc-fab--extended {
	padding-inline: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-fab--small.pc-fab--extended {
	padding-inline: calc(0.75rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
}

.pc-fab--large.pc-fab--extended {
	padding-inline: calc(1.75rem * var(--pc-font-scale, 1));
}

.pc-fab--large .pc-fab__label {
	font-size: calc(1.5rem * var(--pc-font-scale, 1));
	line-height: calc(2rem * var(--pc-font-scale, 1));
}

/*
 * A connected button group (Material 3): related actions with a narrow gap and squared inner
 * corners. It wraps rather than overflowing at compact widths.
 */
.pc-button-group {
	display: inline-flex;
	max-width: 100%;
	flex-wrap: wrap;
	align-items: stretch;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
	vertical-align: middle;
}

.pc-button-group--full-width {
	display: flex;
	width: 100%;
}

.pc-button-group--full-width > * {
	flex: 1 1 0;
	min-width: 0;
}

.pc-button-group > :is(.pc-button, .pc-icon-button):not(:first-child) {
	border-start-start-radius: var(--pc-shape-corner-extra-small);
	border-end-start-radius: var(--pc-shape-corner-extra-small);
}

.pc-button-group > :is(.pc-button, .pc-icon-button):not(:last-child) {
	border-start-end-radius: var(--pc-shape-corner-extra-small);
	border-end-end-radius: var(--pc-shape-corner-extra-small);
}

.pc-link {
	display: inline-flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	--pc-action-foreground: var(--pc-color-primary);
	color: var(--pc-action-foreground);
	font-weight: 500;
	/* Explicit, so a host reset such as a { text-decoration: none } does not remove it. */
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pc-link--color-primary { --pc-action-foreground: var(--pc-color-primary); }
.pc-link--color-secondary { --pc-action-foreground: var(--pc-color-secondary); }
.pc-link--color-tertiary { --pc-action-foreground: var(--pc-color-tertiary); }
.pc-link--color-neutral { --pc-action-foreground: var(--pc-color-on-surface-variant); }
.pc-link--color-info { --pc-action-foreground: var(--pc-color-info); }
.pc-link--color-success { --pc-action-foreground: var(--pc-color-success); }
.pc-link--color-warning { --pc-action-foreground: var(--pc-color-warning); }
.pc-link--color-error { --pc-action-foreground: var(--pc-color-error); }

.pc-link--underline-hover,
.pc-link--underline-none {
	text-decoration-line: none;
}

.pc-link--underline-hover:hover,
.pc-link--underline-hover:focus-visible {
	text-decoration-line: underline;
}

/* A disabled link has no href, so it is neither followed nor focused; it reads as muted text. */
.pc-link--disabled {
	--pc-action-foreground: var(--pc-color-on-surface);
	cursor: not-allowed;
	opacity: 0.38;
	text-decoration-line: none;
}

.pc-segmented-button {
	display: inline-flex;
	max-width: 100%;
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-full);
	overflow: hidden;
}

.pc-segmented-button__item {
	min-height: var(--pc-density-control-medium);
	padding-inline: var(--pc-density-space-lg);
	color: var(--pc-color-on-surface);
	background: transparent;
	border-right: 1px solid var(--pc-color-outline);
}

.pc-segmented-button__item:last-child {
	border-right: 0;
}

.pc-segmented-button__item--selected {
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
}

/* IconOnly: square icon segments. Each one sits in its own tooltip wrapper (with the hidden bubble
   after the button), so the dividers follow the wrappers rather than the buttons. */
.pc-segmented-button--icon-only .pc-segmented-button__item {
	min-width: var(--pc-density-control-medium);
	padding-inline: var(--pc-density-space-sm);
	border-right: 1px solid var(--pc-color-outline);
}

.pc-segmented-button--icon-only > .pc-tooltip:last-child > .pc-segmented-button__item {
	border-right: 0;
}

/* An icon segment has no room for the check mark a text segment shows, so the selected one also
   carries a solid bar along its bottom edge: a cue that does not depend on the fill colour, which
   sits close to the surfaces the group is placed on (WCAG 1.4.1 and 1.4.11). */
.pc-segmented-button--icon-only .pc-segmented-button__item--selected {
	box-shadow: inset 0 -3px 0 0 currentColor;
}

/* Forced colours (Windows High Contrast) replace both the fill and the bar, so the selected segment
   takes the system highlight colours instead. */
@media (forced-colors: active) {
	.pc-segmented-button__item--selected {
		forced-color-adjust: none;
		color: HighlightText;
		background: Highlight;
	}
}

/* The wrapper keeps the group and its feedback together as one item in flex and grid layouts. */
.pc-segmented-field {
	display: inline-flex;
	max-width: 100%;
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-segmented-button--error,
.pc-segmented-button--error .pc-segmented-button__item {
	border-color: var(--pc-color-error);
}

/* Read-only: still focusable, but the quieter dashed outline shows it cannot change. */
.pc-segmented-button--readonly {
	border-style: dashed;
	border-color: var(--pc-color-outline-variant);
}

.pc-segmented-button--readonly .pc-segmented-button__item {
	cursor: default;
}

/* Disabled: the segments fade through their own disabled state; the outline mutes to match. */
.pc-segmented-button--disabled {
	border-color: color-mix(in srgb, var(--pc-color-on-surface) 12%, transparent);
}

.pc-form-field,
.pc-field,
.pc-date-time-picker,
.pc-date-time-range-picker,
.pc-slider,
.pc-color-picker,
.pc-autocomplete {
	display: flex;
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	min-width: 0;
}

.pc-picker-field {
	position: relative;
}

.pc-field__anchor,
.pc-select__anchor,
.pc-multi-select__anchor,
.pc-color-picker__anchor {
	position: relative;
	min-width: 0;
}

.pc-input-popover {
	box-sizing: border-box;
	color-scheme: inherit;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container);
}

.pc-select__surface[popover]:popover-open,
.pc-autocomplete__list[popover]:popover-open,
.pc-multi-select__surface[popover]:popover-open,
.pc-color-picker__surface[popover]:popover-open {
	position: fixed;
	inset: auto;
	margin: 0;
}

.pc-form-field__label,
.pc-field__label,
.pc-slider__label-row,
.pc-color-picker > label,
.pc-date-range > legend,
.pc-date-time-range-picker > legend,
.pc-duration-field > legend,
.pc-radio-group > legend {
	color: var(--pc-color-on-surface);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-field__label > span,
.pc-form-field__label > span,
.pc-date-range > legend > span,
.pc-date-time-range-picker > legend > span,
.pc-duration-field > legend > span,
.pc-radio-group > legend > span {
	color: var(--pc-color-error);
}

/* The required asterisk is generated content on an aria-hidden span (MudBlazor also drew it as
   generated content): it is part of neither the label's text (a lookup by the label's exact text
   still finds the field) nor the accessible name, while aria-required on the control states the
   requirement. */
.pc-required-marker::after {
	content: "*";
}

.pc-required-marker--spaced::after {
	content: " *";
}

.pc-field__container {
	display: flex;
	align-items: center;
	min-height: var(--pc-density-field-height);
	overflow: hidden;
	color: var(--pc-color-on-surface);
	border: 0;
	transition:
		border-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-field--filled .pc-field__container {
	background: var(--pc-color-surface-container-highest);
	border-bottom: 1px solid var(--pc-color-on-surface-variant);
	border-radius: var(--pc-shape-corner-extra-small) var(--pc-shape-corner-extra-small) 0 0;
}

.pc-field--filled .pc-field__container:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 -2px var(--pc-color-primary);
}

.pc-field--filled.pc-field--error .pc-field__container {
	border-color: var(--pc-color-error);
	box-shadow: inset 0 -1px var(--pc-color-error);
}

.pc-field--outlined .pc-field__container {
	background: transparent;
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
}

.pc-field--outlined .pc-field__container:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 0 0 1px var(--pc-color-primary);
}

.pc-field--outlined.pc-field--error .pc-field__container {
	border-color: var(--pc-color-error);
	box-shadow: inset 0 0 0 1px var(--pc-color-error);
}

.pc-field--theme .pc-field__container {
	background: var(--pc-field-theme-background);
	border: var(--pc-field-theme-border);
	border-bottom: var(--pc-field-theme-border-bottom);
	border-radius: var(--pc-field-theme-radius);
}

.pc-field--theme .pc-field__container:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: var(--pc-field-theme-focus-shadow);
}

.pc-field--theme.pc-field--error .pc-field__container {
	border-color: var(--pc-color-error);
	box-shadow: var(--pc-field-theme-error-shadow);
}

.pc-field--disabled {
	opacity: 0.38;
}

/* A read-only value stays legible, focusable and selectable; the dashed, quieter boundary and
   absent focus emphasis show it cannot be edited (not conveyed by colour alone). */
.pc-field--readonly .pc-field__container,
.pc-field--readonly .pc-field__container:focus-within {
	border-color: var(--pc-color-outline-variant);
	border-style: dashed;
	box-shadow: none;
}

.pc-field--readonly.pc-field--error .pc-field__container {
	border-color: var(--pc-color-error);
}

.pc-field--readonly .pc-field__input {
	cursor: default;
}

.pc-field__input {
	width: 100%;
	min-width: 0;
	min-height: var(--pc-density-field-input-height);
	padding: var(--pc-density-field-padding-block) var(--pc-density-field-padding-inline);
	color: inherit;
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	font-size: calc(1rem * var(--pc-font-scale, 1));
	line-height: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-field__input::placeholder {
	color: var(--pc-color-on-surface-variant);
	opacity: 0.8;
}

.pc-field__input[type="search"]::-webkit-search-cancel-button,
.pc-field__input[type="search"]::-webkit-search-decoration {
	appearance: none;
	-webkit-appearance: none;
}

.pc-field__input[type="search"]::-ms-clear,
.pc-field__input[type="search"]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

.pc-field__input--textarea {
	min-height: calc(7rem * var(--pc-font-scale, 1));
	resize: vertical;
}

.pc-field__leading-icon {
	margin-left: var(--pc-density-field-padding-inline);
	color: var(--pc-color-on-surface-variant);
}

.pc-field__trailing-icon {
	margin-right: var(--pc-density-field-padding-inline);
	color: var(--pc-color-on-surface-variant);
	pointer-events: none;
}

.pc-field__clear {
	flex: 0 0 auto;
	margin-right: calc(0.25rem * var(--pc-font-scale, 1));
}

/* Trailing action and password-reveal buttons sit inside the field like the clear button. */
.pc-field__action {
	flex: 0 0 auto;
	margin-inline-end: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-field__affix {
	flex: 0 0 auto;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(1rem * var(--pc-font-scale, 1));
	line-height: calc(1.5rem * var(--pc-font-scale, 1));
	white-space: nowrap;
}

.pc-field__affix--prefix {
	padding-inline-start: var(--pc-density-field-padding-inline);
}

.pc-field__leading-icon + .pc-field__affix--prefix {
	padding-inline-start: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-field__affix--suffix {
	padding-inline-end: var(--pc-density-field-padding-inline);
}

.pc-field__input--prefixed {
	padding-inline-start: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-field__input--suffixed {
	padding-inline-end: calc(0.25rem * var(--pc-font-scale, 1));
}

/* The field supplies no spin buttons of its own, so hiding the native ones leaves arrow keys and
   typing as the ways to change the value. */
.pc-field__input--no-spin {
	appearance: textfield;
	-moz-appearance: textfield;
}

.pc-field__input--no-spin::-webkit-inner-spin-button,
.pc-field__input--no-spin::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}

/* Auto-grow: CSS field-sizing where supported (the script fallback sets the height elsewhere),
   bounded by the Rows minimum and the optional MaxRows maximum, then scrolls. */
.pc-field__input--autogrow {
	min-height: calc(var(--pc-field-rows, 1) * 1.5rem * var(--pc-font-scale, 1) + 2 * var(--pc-density-field-padding-block));
	field-sizing: content;
	overflow-y: auto;
	resize: none;
}

.pc-field__input--max-rows {
	max-height: calc(var(--pc-field-max-rows, 1) * 1.5rem * var(--pc-font-scale, 1) + 2 * var(--pc-density-field-padding-block));
}

.pc-picker-field--open {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

.pc-picker-field__anchor {
	position: relative;
	min-width: 0;
}

.pc-picker-field__input {
	flex: 1 1 auto;
	width: auto;
}

.pc-picker-field__input[readonly] {
	cursor: pointer;
}

/* A read-only picker field never opens its picker, so its text is not a click target. */
.pc-field--readonly .pc-picker-field__input[readonly] {
	cursor: default;
}

.pc-picker-field__toggle {
	flex: 0 0 auto;
	margin-right: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
}

.pc-picker-field__dismiss-layer {
	position: fixed;
	z-index: var(--pc-z-popover, 95);
	inset: 0;
	background: transparent;
}

html.pc-picker-modal-open {
	overflow: hidden;
}

.pc-picker-field--modal-open .pc-picker-field__dismiss-layer {
	background: color-mix(in srgb, var(--pc-color-scrim, #000) 32%, transparent);
}

.pc-picker-field__surface {
	position: absolute;
	z-index: calc(var(--pc-z-popover, 95) + 2);
	top: calc(100% + calc(0.25rem * var(--pc-font-scale, 1)));
	left: 0;
	display: flex;
	max-width: calc(100vw - 1rem);
	max-width: calc(100dvw - 1rem);
	max-height: calc(100vh - 1rem);
	max-height: calc(100dvh - 1rem);
	flex-direction: column;
	gap: calc(1rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	overflow: auto;
	overscroll-behavior: contain;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border: 0;
	border-radius: var(--pc-shape-corner-extra-large);
	box-shadow: var(--pc-elevation-level-3);
	scrollbar-gutter: stable;
}

.pc-picker-field__surface[popover]:popover-open {
	position: fixed;
	inset: auto;
	margin: 0;
}

.pc-date-field__surface {
	width: calc(25rem * var(--pc-font-scale, 1));
}

.pc-time-field__surface {
	width: calc(23rem * var(--pc-font-scale, 1));
}

.pc-date-time-picker__surface {
	width: calc(25rem * var(--pc-font-scale, 1));
}

.pc-date-range-picker__surface {
	width: calc(25rem * var(--pc-font-scale, 1));
}

.pc-picker-field__surface-header,
.pc-picker-field__actions {
	position: sticky;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	flex: 0 0 auto;
	background: var(--pc-color-surface-container-high);
}

.pc-picker-field__surface-header {
	top: 0;
	justify-content: space-between;
}

.pc-picker-field__surface-header h2 {
	margin: 0;
}

.pc-picker-field__actions {
	bottom: 0;
	justify-content: flex-end;
}

.pc-picker-field__clear {
	margin-right: auto;
}

.pc-date-time-picker__tabs {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: calc(1.25rem * var(--pc-font-scale, 1));
	border-bottom: calc(0.0625rem * var(--pc-font-scale, 1)) solid var(--pc-color-outline-variant);
}

.pc-date-time-picker__tab {
	position: relative;
	min-height: calc(3rem * var(--pc-font-scale, 1));
	padding: calc(0.625rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 0;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	cursor: pointer;
}

.pc-date-time-picker__tab::after {
	position: absolute;
	right: calc(0.75rem * var(--pc-font-scale, 1));
	bottom: 0;
	left: calc(0.75rem * var(--pc-font-scale, 1));
	height: calc(0.1875rem * var(--pc-font-scale, 1));
	background: transparent;
	border-radius: calc(0.1875rem * var(--pc-font-scale, 1)) calc(0.1875rem * var(--pc-font-scale, 1)) 0 0;
	content: "";
}

.pc-date-time-picker__tab:hover {
	color: var(--pc-color-on-surface);
	background: color-mix(in srgb, var(--pc-color-primary) 8%, transparent);
}

.pc-date-time-picker__tab:focus-visible {
	outline: calc(0.1875rem * var(--pc-font-scale, 1)) solid color-mix(in srgb, var(--pc-color-primary) 40%, transparent);
	outline-offset: calc(-0.1875rem * var(--pc-font-scale, 1));
}

.pc-date-time-picker__tab--active {
	color: var(--pc-color-primary);
}

.pc-date-time-picker__tab--active::after {
	background: var(--pc-color-primary);
}

.pc-date-time-picker__panes,
.pc-date-time-picker__pane {
	min-width: 0;
}

.pc-date-time-picker__panes[data-active-panel="date"] > .pc-date-time-picker__pane--time,
.pc-date-time-picker__panes[data-active-panel="time"] > .pc-date-time-picker__pane--date {
	display: none;
}

.pc-date-time-picker__panel-title {
	display: none;
	margin: 0 0 calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-date-picker {
	display: flex;
	width: min(100%, calc(22rem * var(--pc-font-scale, 1)));
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	padding: calc(1.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-extra-large);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-date-picker--disabled {
	opacity: 0.38;
}

/* Read-only days stay focusable (aria-disabled) but are not click targets. */
.pc-date-picker--readonly .pc-date-picker__day[aria-disabled="true"] {
	cursor: default;
}

.pc-date-picker--readonly .pc-date-picker__day[aria-disabled="true"]:hover {
	background: transparent;
}

.pc-date-picker--readonly .pc-date-picker__day--selected[aria-disabled="true"]:hover {
	background: var(--pc-color-primary);
}

.pc-date-picker__header {
	display: grid;
	grid-template-columns: calc(3rem * var(--pc-font-scale, 1)) minmax(0, 1fr) calc(3rem * var(--pc-font-scale, 1));
	align-items: center;
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 500;
	text-align: center;
}

.pc-date-picker__period-button {
	display: inline-flex;
	min-width: 0;
	min-height: calc(2.5rem * var(--pc-font-scale, 1));
	align-items: center;
	justify-content: center;
	gap: calc(0.375rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-full);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.pc-date-picker__period-button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-color-primary) 8%, transparent);
}

.pc-date-picker__period-button:focus-visible {
	outline: calc(0.1875rem * var(--pc-font-scale, 1)) solid color-mix(in srgb, var(--pc-color-primary) 40%, transparent);
	outline-offset: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-date-picker__period-button:disabled {
	cursor: default;
}

.pc-date-picker__calendar-grid {
	display: flex;
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-date-picker__weekdays,
.pc-date-picker__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-date-picker__weekdays span {
	display: grid;
	min-height: calc(2rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-date-picker__week > [role="gridcell"] {
	display: grid;
	place-items: center;
}

.pc-date-picker--range .pc-date-picker__week {
	gap: 0;
}

.pc-date-picker__range-cell {
	width: 100%;
}

.pc-date-picker__range-cell--in-range {
	background: color-mix(in srgb, var(--pc-color-primary) 18%, transparent);
}

.pc-date-picker__range-cell--start:not(.pc-date-picker__range-cell--end) {
	background:
		linear-gradient(
			to right,
			transparent 50%,
			color-mix(in srgb, var(--pc-color-primary) 18%, transparent) 50%);
}

.pc-date-picker__range-cell--end:not(.pc-date-picker__range-cell--start) {
	background:
		linear-gradient(
			to right,
			color-mix(in srgb, var(--pc-color-primary) 18%, transparent) 50%,
			transparent 50%);
}

.pc-date-picker__range-cell--start.pc-date-picker__range-cell--end {
	background: transparent;
}

:dir(rtl) .pc-date-picker__range-cell--start:not(.pc-date-picker__range-cell--end) {
	background:
		linear-gradient(
			to left,
			transparent 50%,
			color-mix(in srgb, var(--pc-color-primary) 18%, transparent) 50%);
}

:dir(rtl) .pc-date-picker__range-cell--end:not(.pc-date-picker__range-cell--start) {
	background:
		linear-gradient(
			to left,
			color-mix(in srgb, var(--pc-color-primary) 18%, transparent) 50%,
			transparent 50%);
}

.pc-date-picker__day {
	display: grid;
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	padding: 0;
	place-items: center;
	color: var(--pc-color-on-surface);
	background: transparent;
	border: calc(0.0625rem * var(--pc-font-scale, 1)) solid transparent;
	border-radius: 50%;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	cursor: pointer;
}

.pc-date-picker__day:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-color-primary) 12%, transparent);
}

.pc-date-picker__day:focus-visible {
	outline: calc(0.1875rem * var(--pc-font-scale, 1)) solid color-mix(in srgb, var(--pc-color-primary) 40%, transparent);
	outline-offset: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-date-picker__day--outside {
	color: color-mix(in srgb, var(--pc-color-on-surface) 48%, transparent);
}

.pc-date-picker__day--today {
	border-color: var(--pc-color-primary);
}

.pc-date-picker__day--in-range,
.pc-date-picker__day--in-range:hover:not(:disabled) {
	background: transparent;
}

.pc-date-picker__day--selected,
.pc-date-picker__day--selected:hover:not(:disabled) {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
	border-color: var(--pc-color-primary);
}

.pc-date-picker__day:disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 30%, transparent);
	cursor: default;
}

.pc-date-picker__day--empty {
	visibility: hidden;
}

.pc-date-picker__month-grid {
	display: grid;
	min-height: calc(18.5rem * var(--pc-font-scale, 1));
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	align-content: stretch;
}

.pc-date-picker__month {
	width: 100%;
	min-width: 0;
	max-width: calc(5.5rem * var(--pc-font-scale, 1));
	min-height: calc(3rem * var(--pc-font-scale, 1));
	align-self: center;
	justify-self: center;
	padding: calc(0.5rem * var(--pc-font-scale, 1));
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-full);
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.pc-date-picker__month:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-color-primary) 12%, transparent);
}

.pc-date-picker__month:focus-visible {
	outline: calc(0.1875rem * var(--pc-font-scale, 1)) solid color-mix(in srgb, var(--pc-color-primary) 40%, transparent);
	outline-offset: calc(0.0625rem * var(--pc-font-scale, 1));
}

.pc-date-picker__month--selected,
.pc-date-picker__month--selected:hover:not(:disabled) {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
}

.pc-date-picker__month:disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 30%, transparent);
	cursor: default;
}

.pc-date-picker__year-grid {
	display: grid;
	min-height: calc(18.5rem * var(--pc-font-scale, 1));
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	align-content: stretch;
}

.pc-date-picker__year {
	min-width: 0;
	min-height: calc(2.5rem * var(--pc-font-scale, 1));
	padding: calc(0.375rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-full);
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	cursor: pointer;
}

.pc-date-picker__year:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-color-primary) 12%, transparent);
}

.pc-date-picker__year:focus-visible {
	outline: calc(0.1875rem * var(--pc-font-scale, 1)) solid color-mix(in srgb, var(--pc-color-primary) 40%, transparent);
	outline-offset: calc(0.0625rem * var(--pc-font-scale, 1));
}

.pc-date-picker__year--selected,
.pc-date-picker__year--selected:hover:not(:disabled) {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
}

.pc-date-picker__year:disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 30%, transparent);
	cursor: default;
}

.pc-picker-field__surface .pc-date-picker,
.pc-picker-field__surface .pc-time-picker {
	width: 100%;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.pc-picker-field__surface .pc-time-picker__label {
	display: none;
}

@media (max-width: 37.5rem) {
	.pc-picker-field__surface,
	.pc-date-field__surface,
	.pc-time-field__surface,
	.pc-date-time-picker__surface,
	.pc-date-range-picker__surface,
	.pc-date-time-range-picker__surface {
		width: min(
			calc(21.5rem * var(--pc-font-scale, 1)),
			calc(100vw - 1.5rem));
		width: min(
			calc(21.5rem * var(--pc-font-scale, 1)),
			calc(100dvw - 1.5rem));
		gap: calc(0.625rem * var(--pc-font-scale, 1));
		padding: calc(0.625rem * var(--pc-font-scale, 1));
		border-radius: var(--pc-shape-corner-extra-large);
		scrollbar-gutter: auto;
	}

	.pc-picker-field__surface-header h2 {
		font-size: calc(1.125rem * var(--pc-font-scale, 1));
		line-height: calc(1.5rem * var(--pc-font-scale, 1));
	}

	.pc-picker-field__actions {
		flex-wrap: wrap;
		gap: calc(0.25rem * var(--pc-font-scale, 1));
	}

	.pc-date-time-picker__tabs {
		margin-bottom: calc(0.25rem * var(--pc-font-scale, 1));
	}

	.pc-date-time-picker__tab {
		min-height: calc(2.5rem * var(--pc-font-scale, 1));
		padding: calc(0.375rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker {
		gap: calc(0.375rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__header {
		grid-template-columns:
			calc(2.5rem * var(--pc-font-scale, 1))
			minmax(0, 1fr)
			calc(2.5rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__period-button {
		min-height: calc(2.25rem * var(--pc-font-scale, 1));
		padding: calc(0.25rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__calendar-grid,
	.pc-date-picker__weekdays,
	.pc-date-picker__week {
		gap: calc(0.125rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__weekdays span {
		min-height: calc(1.25rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__day {
		width: min(
			calc(2.375rem * var(--pc-font-scale, 1)),
			calc((100vw - 4rem) / 7));
		width: min(
			calc(2.375rem * var(--pc-font-scale, 1)),
			calc((100dvw - 4rem) / 7));
		height: min(
			calc(2.375rem * var(--pc-font-scale, 1)),
			calc((100vw - 4rem) / 7));
		height: min(
			calc(2.375rem * var(--pc-font-scale, 1)),
			calc((100dvw - 4rem) / 7));
	}

	.pc-date-picker__month-grid,
	.pc-date-picker__year-grid {
		min-height: calc(12rem * var(--pc-font-scale, 1));
		gap: calc(0.25rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__month {
		min-height: calc(2.5rem * var(--pc-font-scale, 1));
		padding: calc(0.375rem * var(--pc-font-scale, 1));
	}

	.pc-date-picker__year {
		min-height: calc(2.25rem * var(--pc-font-scale, 1));
		padding: calc(0.25rem * var(--pc-font-scale, 1));
	}

	.pc-time-picker {
		gap: calc(0.5rem * var(--pc-font-scale, 1));
	}

	.pc-time-picker__display {
		font-size: calc(2rem * var(--pc-font-scale, 1));
		line-height: calc(2.375rem * var(--pc-font-scale, 1));
	}

	.pc-time-picker__display-part {
		min-width: calc(3.5rem * var(--pc-font-scale, 1));
		min-height: calc(3.25rem * var(--pc-font-scale, 1));
		padding: calc(0.375rem * var(--pc-font-scale, 1));
	}

	.pc-time-picker__keyboard input {
		height: calc(3.5rem * var(--pc-font-scale, 1));
		font-size: calc(1.875rem * var(--pc-font-scale, 1));
	}

	.pc-time-picker__keyboard > span {
		font-size: calc(1.875rem * var(--pc-font-scale, 1));
	}

	.pc-date-range-picker__endpoint {
		min-height: calc(3.5rem * var(--pc-font-scale, 1));
		padding: calc(0.375rem * var(--pc-font-scale, 1)) calc(0.625rem * var(--pc-font-scale, 1));
	}

	.pc-date-range-picker__status {
		min-height: calc(1rem * var(--pc-font-scale, 1));
		line-height: calc(1rem * var(--pc-font-scale, 1));
	}
}

@media (min-width: 64rem) {
	.pc-date-time-picker__surface:not([data-height-constrained="true"]) {
		width: calc(56.25rem * var(--pc-font-scale, 1));
	}

	.pc-date-time-picker__surface:not([data-height-constrained="true"]) .pc-date-time-picker__tabs {
		display: none;
	}

	.pc-date-time-picker__surface:not([data-height-constrained="true"]) .pc-date-time-picker__panes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(2rem * var(--pc-font-scale, 1));
	}

	.pc-date-time-picker__surface:not([data-height-constrained="true"]) .pc-date-time-picker__panes[data-active-panel] > .pc-date-time-picker__pane {
		display: block;
	}

	.pc-date-time-picker__surface:not([data-height-constrained="true"]) .pc-date-time-picker__pane--date {
		padding-right: calc(2rem * var(--pc-font-scale, 1));
		border-right: calc(0.0625rem * var(--pc-font-scale, 1)) solid var(--pc-color-outline-variant);
	}

	.pc-date-time-picker__surface:not([data-height-constrained="true"]) .pc-date-time-picker__panel-title {
		display: block;
	}
}

.pc-date-time-range-picker__surface[data-height-constrained="true"] {
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__surface[data-height-constrained="true"] .pc-date-time-picker__tabs {
	margin-bottom: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__surface[data-height-constrained="true"] .pc-date-range-picker__endpoint {
	min-height: calc(3.5rem * var(--pc-font-scale, 1));
	padding-block: calc(0.375rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__surface[data-height-constrained="true"] .pc-time-picker {
	gap: calc(0.625rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__surface[data-height-constrained="true"] .pc-time-picker__clock {
	--pc-clock-size: min(
		calc(14rem * var(--pc-font-scale, 1)),
		calc(100vw - 4rem));
	--pc-clock-size: min(
		calc(14rem * var(--pc-font-scale, 1)),
		calc(100dvw - 4rem));
	--pc-clock-value-size: calc(2.75rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__surface[data-height-constrained="true"] .pc-time-picker__display-part {
	min-height: calc(4rem * var(--pc-font-scale, 1));
}

@media (max-width: 37.5rem) {
	.pc-date-time-range-picker__surface {
		gap: calc(0.5rem * var(--pc-font-scale, 1));
	}

	.pc-date-time-range-picker__surface .pc-date-range-picker__endpoint {
		min-height: calc(3.5rem * var(--pc-font-scale, 1));
		padding-block: calc(0.375rem * var(--pc-font-scale, 1));
	}
}

.pc-field__support,
.pc-form-field__support {
	padding-inline: var(--pc-density-field-padding-inline);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-field__support--error,
.pc-form-field__support--error {
	color: var(--pc-color-error);
}

.pc-field__support-row {
	display: flex;
	align-items: flex-start;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	min-width: 0;
}

.pc-field__support-row > .pc-field__support {
	flex: 1 1 auto;
	min-width: 0;
}

.pc-field__counter {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding-inline: var(--pc-density-field-padding-inline);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

/* A form field with a Variant draws its custom editor inside the same surface as a text field. */
.pc-form-field__control--surface {
	min-width: 0;
	min-height: var(--pc-density-field-height);
	padding: var(--pc-density-field-padding-block) var(--pc-density-field-padding-inline);
	color: var(--pc-color-on-surface);
	transition:
		border-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-form-field--filled > .pc-form-field__control--surface {
	background: var(--pc-color-surface-container-highest);
	border-bottom: 1px solid var(--pc-color-on-surface-variant);
	border-radius: var(--pc-shape-corner-extra-small) var(--pc-shape-corner-extra-small) 0 0;
}

.pc-form-field--outlined > .pc-form-field__control--surface {
	background: transparent;
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
}

.pc-form-field--theme > .pc-form-field__control--surface {
	background: var(--pc-field-theme-background);
	border: var(--pc-field-theme-border);
	border-bottom: var(--pc-field-theme-border-bottom);
	border-radius: var(--pc-field-theme-radius);
}

/* Focus and error emphasis match the text field surfaces (.pc-field--filled/--outlined/--theme). */
.pc-form-field--filled > .pc-form-field__control--surface:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 -2px var(--pc-color-primary);
}

.pc-form-field--outlined > .pc-form-field__control--surface:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 0 0 1px var(--pc-color-primary);
}

.pc-form-field--theme > .pc-form-field__control--surface:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: var(--pc-field-theme-focus-shadow);
}

.pc-form-field--filled.pc-form-field--error > .pc-form-field__control--surface,
.pc-form-field--filled.pc-form-field--error > .pc-form-field__control--surface:focus-within {
	border-color: var(--pc-color-error);
	box-shadow: inset 0 -1px var(--pc-color-error);
}

.pc-form-field--outlined.pc-form-field--error > .pc-form-field__control--surface,
.pc-form-field--outlined.pc-form-field--error > .pc-form-field__control--surface:focus-within {
	border-color: var(--pc-color-error);
	box-shadow: inset 0 0 0 1px var(--pc-color-error);
}

.pc-form-field--theme.pc-form-field--error > .pc-form-field__control--surface,
.pc-form-field--theme.pc-form-field--error > .pc-form-field__control--surface:focus-within {
	border-color: var(--pc-color-error);
	box-shadow: var(--pc-field-theme-error-shadow);
}

.pc-form-field--error .pc-form-field__label,
.pc-radio-group--error > legend,
.pc-date-range--error > legend,
.pc-date-time-range-picker--error > legend,
.pc-duration-field--error > legend {
	color: var(--pc-color-error);
}

.pc-field__container--select {
	position: relative;
}

.pc-select {
	position: relative;
}

.pc-select--open {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

.pc-field__select {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
	padding-right: var(--pc-density-space-md);
	text-align: left;
	cursor: pointer;
}

.pc-field__select-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-field__select-placeholder {
	color: var(--pc-color-on-surface-variant);
	opacity: 0.8;
}

.pc-field__select-icon {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--pc-color-on-surface-variant);
	pointer-events: none;
}

.pc-select__dismiss-layer {
	position: fixed;
	z-index: var(--pc-z-popover, 95);
	inset: 0;
	background: transparent;
}

.pc-select__surface {
	position: absolute;
	z-index: calc(var(--pc-z-popover, 95) + 2);
	top: calc(100% + var(--pc-density-space-xs));
	right: 0;
	left: 0;
	/* The surface is a column: the search field (when searchable) is fixed at its top and only
	   the listbox below it scrolls (.pc-select__options). When the surface was the scroller with
	   a sticky search, options scrolling up showed through the surface's top padding and the gap
	   under the search field. The max-height (MaxHeight, or a tighter cap from the anchored
	   popover) bounds the column, and the listbox shrinks to the room that is left. Only when
	   that room is less than one option does the surface itself scroll, search and all. */
	display: flex;
	max-height: calc(20rem * var(--pc-font-scale, 1));
	flex-direction: column;
	padding: var(--pc-density-space-sm) 0;
	overflow-x: hidden;
	overflow-y: auto;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container);
	border: var(--pc-overlay-border);
	border-radius: var(--pc-shape-corner-extra-small);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-select__option {
	display: flex;
	width: 100%;
	min-height: var(--pc-density-control-large);
	align-items: center;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-select__option:hover,
.pc-select__option:focus-visible,
.pc-select__option--active {
	background: var(--pc-color-surface-container-high);
}

/* The listbox is the only scroller and clips its options to its own box, so nothing scrolls
   behind the search field. It is also the scroll container base Virtualize follows for a
   virtualised list. Only the y axis scrolls: setting overflow-y alone makes the browser compute
   overflow-x to auto as well, so any option wider than the surface earned a second scrollbar
   along the bottom of the menu - most visible on a select inside a narrow table cell, where the
   surface is only as wide as its trigger. A listbox is a vertical list; sideways is never the
   right answer. */
.pc-select__options {
	min-height: var(--pc-density-control-medium);
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pc-color-surface-container);
}

/* With no matches the listbox is empty and the message below it takes its place. */
.pc-select__options:has(+ .pc-select__empty) {
	min-height: 0;
}

/* Searchable variant: the filter field sits above the options and does not scroll; a long (or
   virtualised) list scrolls inside the listbox below it. */
.pc-select__search {
	flex: 0 0 auto;
	padding: 0 var(--pc-density-space-md) var(--pc-density-space-sm);
	background: var(--pc-color-surface-container);
}

.pc-select__empty {
	flex: 0 0 auto;
	margin: 0;
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-select__option[aria-selected="true"] {
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
}

.pc-select__option:disabled {
	opacity: 0.38;
	cursor: default;
}

.pc-select__option-copy {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	/* min-width lets the copy shrink, but a long unbroken label ("12MonthTrackingOnly", an email
	   address, a part number) has no break opportunity and pushes the option wider than the menu.
	   Breaking mid-word is the lesser evil: the alternative is content the user cannot reach. */
	overflow-wrap: anywhere;
}

.pc-select__option-support {
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-select__option-check {
	flex: 0 0 auto;
}

.pc-select--dense .pc-select__option {
	min-height: var(--pc-density-control-medium);
	padding-block: var(--pc-density-space-xs);
}

/* Option groups: a quiet heading above each group; the group element carries its name for
   assistive technology, so the heading itself is hidden from it. */
.pc-select__group-label {
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg) var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-select__option + .pc-select__group,
.pc-select__group + .pc-select__group {
	margin-top: var(--pc-density-space-xs);
	border-top: 1px solid var(--pc-color-outline-variant);
}

/* A clear button sits over the end of the trigger, before its chevron, so the whole trigger
   stays one click target; the trigger reserves the room so its value never runs under it. */
.pc-select--clearable .pc-field__select {
	padding-inline-end: calc(var(--pc-density-space-md) + 1.25rem + var(--pc-density-control-medium));
}

.pc-select__clear,
.pc-multi-select__clear {
	position: absolute;
	z-index: 1;
	top: 50%;
	inset-inline-end: calc(var(--pc-density-space-md) + 1.25rem);
	margin: 0;
	transform: translateY(-50%);
}

.pc-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--pc-density-space-md);
	min-height: var(--pc-density-control-large);
	color: var(--pc-color-on-surface);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.pc-choice--disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 48%, transparent);
	cursor: not-allowed;
}

.pc-choice--disabled .pc-choice__support {
	color: color-mix(in srgb, var(--pc-color-on-surface-variant) 48%, transparent);
}

.pc-choice > input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.pc-choice__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pc-choice__label {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-choice__support {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-choice__support--error,
.pc-file-upload__support--error {
	color: var(--pc-color-error);
}

.pc-choice--error .pc-checkbox__control,
.pc-choice--error .pc-switch__track {
	border-color: var(--pc-color-error);
}

/* Read-only choices stay focusable; the dashed control shows they cannot change. */
.pc-choice--readonly,
.pc-radio-group--readonly .pc-choice {
	cursor: default;
}

.pc-choice--readonly .pc-checkbox__control,
.pc-choice--readonly .pc-switch__track,
.pc-radio-group--readonly .pc-radio__control {
	border-style: dashed;
}

/* A disabled checkbox or switch mutes its control as well as its text (radios mute through
   their native disabled state below). */
.pc-choice--disabled .pc-checkbox__control,
.pc-choice--disabled .pc-switch__track {
	opacity: 0.38;
}

/* The label sits before the control; the pair stays packed at the start of a stretched row. */
.pc-choice--label-start {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* A visually hidden label with no supporting text leaves no gap beside the control. */
.pc-choice--control-only {
	gap: 0;
}

/* Dense choices keep the whole label as the target and at least the 1.5rem minimum size. */
.pc-choice--dense {
	min-height: calc(1.5rem * var(--pc-font-scale, 1));
	gap: var(--pc-density-space-sm);
}

/* Trailing content sits beside the label element, outside it, so it never toggles the control. */
.pc-choice-row {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

.pc-choice-row > .pc-choice {
	min-width: 0;
}

.pc-choice__trailing {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

/* Accent colours of checked choices and sliders. Without one the controls use the primary
   colour; a radio group sets it once for all of its options. */
.pc-control--accent-primary {
	--pc-control-accent: var(--pc-color-primary);
	--pc-control-on-accent: var(--pc-color-on-primary);
	--pc-control-accent-icon: var(--pc-color-on-primary-container);
}

.pc-control--accent-secondary {
	--pc-control-accent: var(--pc-color-secondary);
	--pc-control-on-accent: var(--pc-color-on-secondary);
	--pc-control-accent-icon: var(--pc-color-on-secondary-container);
}

.pc-control--accent-tertiary {
	--pc-control-accent: var(--pc-color-tertiary);
	--pc-control-on-accent: var(--pc-color-on-tertiary);
	--pc-control-accent-icon: var(--pc-color-on-tertiary-container);
}

.pc-control--accent-neutral {
	--pc-control-accent: var(--pc-color-on-surface-variant);
	--pc-control-on-accent: var(--pc-color-surface);
	--pc-control-accent-icon: var(--pc-color-on-surface);
}

.pc-control--accent-info {
	--pc-control-accent: var(--pc-color-info);
	--pc-control-on-accent: var(--pc-color-on-info);
	--pc-control-accent-icon: var(--pc-color-on-info-container);
}

.pc-control--accent-success {
	--pc-control-accent: var(--pc-color-success);
	--pc-control-on-accent: var(--pc-color-on-success);
	--pc-control-accent-icon: var(--pc-color-on-success-container);
}

.pc-control--accent-warning {
	--pc-control-accent: var(--pc-color-warning);
	--pc-control-on-accent: var(--pc-color-on-warning);
	--pc-control-accent-icon: var(--pc-color-on-warning-container);
}

.pc-control--accent-error {
	--pc-control-accent: var(--pc-color-error);
	--pc-control-on-accent: var(--pc-color-on-error);
	--pc-control-accent-icon: var(--pc-color-on-error-container);
}

.pc-checkbox__control {
	display: grid;
	width: calc(1.125rem * var(--pc-font-scale, 1));
	height: calc(1.125rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(1.125rem * var(--pc-font-scale, 1));
	place-items: center;
	color: transparent;
	background: transparent;
	border: 2px solid var(--pc-color-on-surface-variant);
	border-radius: 2px;
}

.pc-checkbox__control > .pc-icon {
	display: block;
	width: calc(0.875rem * var(--pc-font-scale, 1));
	height: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-checkbox > input:checked + .pc-checkbox__control,
.pc-checkbox.pc-checkbox--indeterminate > .pc-checkbox__control {
	color: var(--pc-control-on-accent, var(--pc-color-on-primary));
	background: var(--pc-control-accent, var(--pc-color-primary));
	border-color: var(--pc-control-accent, var(--pc-color-primary));
}

.pc-choice > input:focus-visible + .pc-checkbox__control,
.pc-choice > input:focus-visible + .pc-switch__track,
.pc-choice > input:focus-visible + .pc-radio__control {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 3px;
}

.pc-switch__track {
	position: relative;
	width: calc(3.25rem * var(--pc-font-scale, 1));
	height: calc(2rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(3.25rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-variant);
	border: 2px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-full);
	transition: background var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-switch__handle {
	position: absolute;
	top: 50%;
	left: calc(0.375rem * var(--pc-font-scale, 1));
	display: grid;
	width: calc(1rem * var(--pc-font-scale, 1));
	height: calc(1rem * var(--pc-font-scale, 1));
	place-items: center;
	color: transparent;
	background: var(--pc-color-outline);
	border-radius: 50%;
	transform: translateY(-50%);
	transition:
		left var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		width var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-switch > input:checked + .pc-switch__track {
	background: var(--pc-control-accent, var(--pc-color-primary));
	border-color: var(--pc-control-accent, var(--pc-color-primary));
}

.pc-switch > input:checked + .pc-switch__track .pc-switch__handle {
	left: calc(1.375rem * var(--pc-font-scale, 1));
	width: calc(1.5rem * var(--pc-font-scale, 1));
	height: calc(1.5rem * var(--pc-font-scale, 1));
	color: var(--pc-control-accent-icon, var(--pc-color-on-primary-container));
	background: var(--pc-control-on-accent, var(--pc-color-on-primary));
}

.pc-radio-group,
.pc-date-range,
.pc-date-time-range-picker,
.pc-duration-field {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A fieldset compound field spaces its label, box and supporting text as a .pc-field does (0.25rem),
   so its box sits level with a field beside it. A radio group keeps more room above its options. */
.pc-date-range,
.pc-date-time-range-picker,
.pc-duration-field {
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

/* The legend is never the fieldset's rendered legend (floated, it is not): it is the first flex item,
   so the flex gap spaces it like a field's label, with or without an app-wide reboot stylesheet that
   gives legends their own float, width and margin. */
.pc-radio-group > legend,
.pc-date-range > legend,
.pc-date-time-range-picker > legend,
.pc-duration-field > legend {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

.pc-radio__control {
	display: grid;
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(1.25rem * var(--pc-font-scale, 1));
	place-items: center;
	border: 2px solid var(--pc-color-on-surface-variant);
	border-radius: 50%;
}

.pc-radio > input:checked + .pc-radio__control {
	border-color: var(--pc-control-accent, var(--pc-color-primary));
}

.pc-radio > input:checked + .pc-radio__control::after {
	width: calc(0.625rem * var(--pc-font-scale, 1));
	height: calc(0.625rem * var(--pc-font-scale, 1));
	content: "";
	background: var(--pc-control-accent, var(--pc-color-primary));
	border-radius: 50%;
}

.pc-radio > input:disabled + .pc-radio__control {
	border-color: color-mix(in srgb, var(--pc-color-on-surface) 38%, transparent);
}

.pc-radio > input:disabled:checked + .pc-radio__control {
	border-color: color-mix(in srgb, var(--pc-control-accent, var(--pc-color-primary)) 44%, transparent);
}

.pc-radio > input:disabled:checked + .pc-radio__control::after {
	background: color-mix(in srgb, var(--pc-control-accent, var(--pc-color-primary)) 44%, transparent);
}

/* A row of options wraps onto further lines when it runs out of space. */
.pc-radio-group__options {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: calc(0.25rem * var(--pc-font-scale, 1)) calc(1.5rem * var(--pc-font-scale, 1));
	min-width: 0;
}

.pc-date-range__fields,
.pc-date-time-range-picker__fields,
.pc-duration-field__controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

/* The boxes dim themselves; the legend dims with them. */
.pc-duration-field--disabled > legend {
	opacity: 0.38;
}

.pc-date-range__control,
.pc-date-time-range-picker__control {
	min-width: 0;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	transition:
		border-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

/* The control is the container its Start/End layout queries. Its font size is the field text's
   (1rem at the theme's font scale), so the em threshold below follows the font scale along with the
   dates it has to fit. A size container has no intrinsic width: in a shrink-to-fit host (a flex row)
   the field needs a width from its host, which .pc-filter-row gives it. */
.pc-date-range__control {
	container-name: pc-date-range-control;
	container-type: inline-size;
	font-size: calc(1rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__control {
	container-name: pc-date-time-range-control;
	container-type: inline-size;
}

.pc-date-range__control > .pc-date-range__fields,
.pc-date-time-range-picker__control > .pc-date-time-range-picker__fields {
	gap: 0;
}

.pc-date-range__control.pc-field--filled,
.pc-date-time-range-picker__control.pc-field--filled {
	background: var(--pc-color-surface-container-highest);
	border-bottom: 1px solid var(--pc-color-on-surface-variant);
	border-radius: var(--pc-shape-corner-extra-small) var(--pc-shape-corner-extra-small) 0 0;
}

.pc-date-range__control.pc-field--filled:focus-within,
.pc-date-time-range-picker__control.pc-field--filled:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 -2px var(--pc-color-primary);
}

.pc-date-range__control.pc-field--outlined,
.pc-date-time-range-picker__control.pc-field--outlined {
	background: transparent;
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
}

.pc-date-range__control.pc-field--outlined:focus-within,
.pc-date-time-range-picker__control.pc-field--outlined:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 0 0 1px var(--pc-color-primary);
}

.pc-date-range__control.pc-field--theme,
.pc-date-time-range-picker__control.pc-field--theme {
	background: var(--pc-field-theme-background);
	border: var(--pc-field-theme-border);
	border-bottom: var(--pc-field-theme-border-bottom);
	border-radius: var(--pc-field-theme-radius);
}

.pc-date-range__control.pc-field--theme:focus-within,
.pc-date-time-range-picker__control.pc-field--theme:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: var(--pc-field-theme-focus-shadow);
}

.pc-date-range__control.pc-field--error,
.pc-date-range__control:has(.pc-field--error),
.pc-date-time-range-picker__control.pc-field--error,
.pc-date-time-range-picker__control:has(.pc-field--error) {
	border-color: var(--pc-color-error);
	box-shadow: var(--pc-field-theme-error-shadow);
}

.pc-date-range__control--disabled,
.pc-date-time-range-picker__control--disabled {
	opacity: 0.38;
}

/* Read-only ranges share the read-only field boundary: dashed, quieter and without focus emphasis. */
.pc-date-range__control--readonly,
.pc-date-range__control--readonly:focus-within,
.pc-date-time-range-picker__control--readonly,
.pc-date-time-range-picker__control--readonly:focus-within {
	border-color: var(--pc-color-outline-variant);
	border-style: dashed;
	box-shadow: none;
}

.pc-date-range__endpoint-field,
.pc-date-time-range-picker__endpoint-field {
	min-width: 0;
}

.pc-date-range__endpoint-field--end,
.pc-date-time-range-picker__endpoint-field--end {
	border-inline-start: 1px solid var(--pc-color-outline-variant);
}

.pc-date-range__control .pc-field,
.pc-date-time-range-picker__control .pc-field {
	position: relative;
	gap: 0;
	min-width: 0;
	opacity: 1;
}

.pc-date-range__control .pc-field__label,
.pc-date-time-range-picker__control .pc-field__label {
	position: absolute;
	z-index: 1;
	top: calc(0.375rem * var(--pc-font-scale, 1));
	inset-inline: var(--pc-density-field-padding-inline) auto;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1rem * var(--pc-font-scale, 1));
	pointer-events: none;
}

.pc-date-range__control .pc-field__container,
.pc-date-range__control .pc-field__container:focus-within,
.pc-date-range__control .pc-field--error .pc-field__container,
.pc-date-time-range-picker__control .pc-field__container,
.pc-date-time-range-picker__control .pc-field__container:focus-within,
.pc-date-time-range-picker__control .pc-field--error .pc-field__container {
	min-height: var(--pc-density-field-height);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pc-date-range__control .pc-field__input,
.pc-date-time-range-picker__control .pc-field__input {
	padding-block:
		calc(var(--pc-density-field-padding-block) + (0.375rem * var(--pc-font-scale, 1)))
		calc(var(--pc-density-field-padding-block) - (0.375rem * var(--pc-font-scale, 1)));
}

.pc-date-range__toggle,
.pc-date-time-range-picker__toggle {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--pc-color-on-surface-variant);
}

/* Start and End sit side by side whenever the control holds two short dates ("dd MMM yyyy") and the
   calendar button, and stack only below that, so the layout follows the width of the field rather
   than the viewport: a filter pane or a phone's sheet keeps the pair on one row when it is wide
   enough. End is the wider column because the calendar button (about 3rem with its inset) takes
   room from its text, so at the threshold both endpoints keep the same room for a date. The filter
   row's date-range width (24rem) stays above this threshold. */
.pc-date-range__fields {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

@container pc-date-range-control (max-width: 19em) {
	.pc-date-range__fields {
		grid-template-columns: 1fr;
	}

	.pc-date-range__endpoint-field--end {
		border-top: 1px solid var(--pc-color-outline-variant);
		border-inline-start: 0;
	}
}

@container pc-date-time-range-control (max-width: 30rem) {
	.pc-date-time-range-picker__fields {
		grid-template-columns: 1fr;
	}

	.pc-date-time-range-picker__endpoint-field--end {
		border-top: 1px solid var(--pc-color-outline-variant);
		border-inline-start: 0;
	}
}

.pc-date-range-picker__endpoints {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-date-range-picker__endpoint {
	display: flex;
	min-width: 0;
	min-height: calc(4.25rem * var(--pc-font-scale, 1));
	flex-direction: column;
	justify-content: center;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
	padding: calc(0.625rem * var(--pc-font-scale, 1)) calc(0.875rem * var(--pc-font-scale, 1));
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-highest);
	border: calc(0.0625rem * var(--pc-font-scale, 1)) solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.pc-date-range-picker__endpoint > span {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-date-range-picker__endpoint > strong {
	overflow: hidden;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-date-range-picker__endpoint:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-color-primary) 8%, var(--pc-color-surface-container-highest));
}

.pc-date-range-picker__endpoint:focus-visible {
	outline: calc(0.1875rem * var(--pc-font-scale, 1)) solid color-mix(in srgb, var(--pc-color-primary) 40%, transparent);
	outline-offset: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-date-range-picker__endpoint--active {
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
	border-color: var(--pc-color-primary);
}

.pc-date-range-picker__endpoint:disabled {
	opacity: 0.38;
	cursor: default;
}

.pc-date-range-picker__status {
	min-height: calc(1.25rem * var(--pc-font-scale, 1));
	margin: 0;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-date-time-range-picker__draft-error {
	color: var(--pc-color-error);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-time-picker {
	display: flex;
	width: min(100%, calc(20.5rem * var(--pc-font-scale, 1)));
	flex-direction: column;
	gap: calc(1.25rem * var(--pc-font-scale, 1));
	padding: calc(1.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-extra-large);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-time-picker--disabled {
	opacity: 0.38;
}

/* Read-only clock values and AM/PM stay focusable (aria-disabled) but are not click targets. */
.pc-time-picker--readonly .pc-time-picker__clock-value[aria-disabled="true"],
.pc-time-picker--readonly .pc-time-picker__period-button[aria-disabled="true"] {
	cursor: default;
}

.pc-time-picker--readonly .pc-time-picker__clock-value[aria-disabled="true"]:not(.pc-time-picker__clock-value--selected):hover {
	background: transparent;
}

.pc-time-picker__header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	align-items: end;
}

.pc-time-picker__label {
	grid-column: 1 / -1;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-time-picker__display {
	display: flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	font-size: calc(2.8125rem * var(--pc-font-scale, 1));
	line-height: calc(3.25rem * var(--pc-font-scale, 1));
}

.pc-time-picker__display-part {
	min-width: calc(5rem * var(--pc-font-scale, 1));
	min-height: calc(4.5rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-highest);
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	cursor: pointer;
}

.pc-time-picker__display-part--selected {
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
}

.pc-time-picker__display-part:focus-visible,
.pc-time-picker__period-button:focus-visible,
.pc-time-picker__clock-value:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-time-picker__period {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
}

.pc-time-picker__period-button {
	min-width: calc(3.25rem * var(--pc-font-scale, 1));
	min-height: calc(2.25rem * var(--pc-font-scale, 1));
	padding: calc(0.25rem * var(--pc-font-scale, 1)) calc(0.625rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 0;
	font: inherit;
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
	cursor: pointer;
}

.pc-time-picker__period-button + .pc-time-picker__period-button {
	border-top: 1px solid var(--pc-color-outline);
}

.pc-time-picker__period-button--selected {
	color: var(--pc-color-on-tertiary-container);
	background: var(--pc-color-tertiary-container);
}

.pc-time-picker__clock {
	--pc-clock-size: calc(16rem * var(--pc-font-scale, 1));
	--pc-clock-value-size: calc(3rem * var(--pc-font-scale, 1));
	--pc-clock-edge-inset: calc(0.5rem * var(--pc-font-scale, 1));
	--pc-clock-radius: calc(
		(var(--pc-clock-size) - var(--pc-clock-value-size)) / 2
		- var(--pc-clock-edge-inset));
	/* The 24-hour inner ring sits inside the outer values; each inner value is half the ring's
	   radius wide, so twelve fit around it without overlapping at every clock size. */
	--pc-clock-inner-radius: calc(
		(var(--pc-clock-radius) - var(--pc-clock-value-size) / 2
		- 0.125rem * var(--pc-font-scale, 1)) / 1.25);
	--pc-clock-inner-value-size: calc(var(--pc-clock-inner-radius) / 2);
	position: relative;
	width: var(--pc-clock-size);
	height: var(--pc-clock-size);
	align-self: center;
	background: var(--pc-color-surface-container-highest);
	border-radius: 50%;
}

.pc-time-picker__clock-hand {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: 2px;
	height: var(--pc-clock-radius);
	background: var(--pc-color-primary);
	transform:
		translate(-50%, -100%)
		rotate(calc(var(--pc-clock-selection-index) * 30deg));
	transform-origin: 50% 100%;
}

.pc-time-picker__clock[data-hand="inner"] .pc-time-picker__clock-hand {
	height: var(--pc-clock-inner-radius);
}

.pc-time-picker__clock-value {
	position: absolute;
	z-index: 1;
	top: calc(50% - var(--pc-clock-value-size) / 2);
	left: calc(50% - var(--pc-clock-value-size) / 2);
	display: grid;
	width: var(--pc-clock-value-size);
	height: var(--pc-clock-value-size);
	padding: 0;
	place-items: center;
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	border-radius: 50%;
	font: inherit;
	cursor: pointer;
	transform:
		rotate(calc(var(--pc-clock-index) * 30deg))
		translateY(calc(-1 * var(--pc-clock-radius)))
		rotate(calc(var(--pc-clock-index) * -30deg));
}

.pc-time-picker__clock-value--inner {
	top: calc(50% - var(--pc-clock-inner-value-size) / 2);
	left: calc(50% - var(--pc-clock-inner-value-size) / 2);
	width: var(--pc-clock-inner-value-size);
	height: var(--pc-clock-inner-value-size);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	transform:
		rotate(calc(var(--pc-clock-index) * 30deg))
		translateY(calc(-1 * var(--pc-clock-inner-radius)))
		rotate(calc(var(--pc-clock-index) * -30deg));
}

.pc-time-picker__clock-value:hover {
	background: color-mix(in srgb, var(--pc-color-primary) 12%, transparent);
}

/* Hours and minutes outside MinuteStep or Min/Max: muted, not clickable, never colour alone
   (the native disabled state removes them from interaction). */
.pc-time-picker__clock-value:disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 38%, transparent);
	cursor: default;
}

.pc-time-picker__clock-value:disabled:hover {
	background: transparent;
}

.pc-time-picker__period-button:disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 38%, transparent);
	cursor: default;
}

.pc-time-picker__clock-value--selected {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
}

.pc-time-picker__clock-value--selected:hover {
	background: var(--pc-color-primary);
}

.pc-time-picker__clock-center {
	position: absolute;
	z-index: 1;
	top: calc(50% - 3px);
	left: calc(50% - 3px);
	width: calc(0.375rem * var(--pc-font-scale, 1));
	height: calc(0.375rem * var(--pc-font-scale, 1));
	background: var(--pc-color-primary);
	border-radius: 50%;
}

.pc-time-picker__keyboard {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	align-items: end;
}

.pc-time-picker__keyboard label {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-time-picker__keyboard label:first-of-type {
	grid-row: 1;
	grid-column: 1;
}

.pc-time-picker__keyboard label:last-of-type {
	grid-row: 1;
	grid-column: 3;
}

.pc-time-picker__keyboard input:first-of-type {
	grid-row: 2;
	grid-column: 1;
}

.pc-time-picker__keyboard input:last-of-type {
	grid-row: 2;
	grid-column: 3;
}

.pc-time-picker__keyboard input {
	width: 100%;
	min-width: 0;
	height: calc(4.5rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	outline: 0;
	font: inherit;
	font-size: calc(2.25rem * var(--pc-font-scale, 1));
	text-align: center;
}

.pc-time-picker__keyboard input:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pc-color-primary);
}

.pc-time-picker__keyboard > span {
	grid-row: 2;
	grid-column: 2;
	align-self: center;
	font-size: calc(2.25rem * var(--pc-font-scale, 1));
}

.pc-time-picker__footer {
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

@media (max-width: 37.5rem) {
	.pc-time-picker__clock {
		--pc-clock-size: min(
			calc(14rem * var(--pc-font-scale, 1)),
			calc(100vw - 4.5rem));
		--pc-clock-size: min(
			calc(14rem * var(--pc-font-scale, 1)),
			calc(100dvw - 4.5rem));
		--pc-clock-value-size: calc(2.5rem * var(--pc-font-scale, 1));
		--pc-clock-edge-inset: calc(0.375rem * var(--pc-font-scale, 1));
	}
}

.pc-slider__label-row {
	display: flex;
	justify-content: space-between;
	gap: calc(1rem * var(--pc-font-scale, 1));
}

.pc-slider input[type="range"] {
	width: 100%;
	height: calc(2.5rem * var(--pc-font-scale, 1));
	margin: 0;
	accent-color: var(--pc-control-accent, var(--pc-color-primary));
	cursor: pointer;
}

/* Step marks sit just under the native track. They are inset by half the native thumb, whose
   centre is what reaches each end, so a mark lines up with the thumb at that value. */
.pc-slider__ticks {
	position: relative;
	height: 0.375rem;
	margin-top: calc(0.375rem - 1.5rem * var(--pc-font-scale, 1));
	margin-inline: 0.5rem;
	pointer-events: none;
}

.pc-slider__tick {
	position: absolute;
	top: 0;
	inset-inline-start: var(--pc-slider-tick);
	width: 2px;
	height: 100%;
	background: var(--pc-color-outline-variant);
	border-radius: 1px;
	transform: translateX(-50%);
}

.pc-slider__tick--active {
	background: var(--pc-control-accent, var(--pc-color-primary));
}

.pc-slider--readonly .pc-slider__tick--active,
.pc-slider:has(input:disabled) .pc-slider__tick--active {
	background: var(--pc-color-outline);
}

.pc-slider--error input[type="range"] {
	accent-color: var(--pc-color-error);
}

.pc-slider--error .pc-slider__label-row > label {
	color: var(--pc-color-error);
}

.pc-slider--readonly input[type="range"] {
	accent-color: var(--pc-color-outline);
	cursor: default;
}

.pc-color-picker {
	position: relative;
}

.pc-color-picker--open {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

.pc-color-picker__trigger {
	display: flex;
	width: 100%;
	min-height: calc(3.375rem * var(--pc-font-scale, 1));
	align-items: center;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	color: inherit;
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-color-picker__trigger code {
	overflow: hidden;
	flex: 1 1 auto;
	font: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A translucent colour is drawn over a checkerboard so its transparency is visible. */
.pc-color-picker__swatch,
.pc-color-picker__preview-swatch {
	--pc-color-picker-checker: linear-gradient(45deg, var(--pc-color-outline-variant) 25%, transparent 25% 75%, var(--pc-color-outline-variant) 75%) 0 0 / 0.5rem 0.5rem,
		linear-gradient(45deg, var(--pc-color-outline-variant) 25%, transparent 25% 75%, var(--pc-color-outline-variant) 75%) 0.25rem 0.25rem / 0.5rem 0.5rem,
		var(--pc-color-surface);
}

.pc-color-picker__swatch {
	width: calc(2.25rem * var(--pc-font-scale, 1));
	height: calc(2.25rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(2.25rem * var(--pc-font-scale, 1));
	background:
		linear-gradient(var(--pc-color-picker-value, transparent), var(--pc-color-picker-value, transparent)),
		var(--pc-color-picker-checker);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-color-surface) 35%, transparent);
}

/* No colour: an empty swatch crossed by a diagonal, beside the placeholder text. */
.pc-color-picker__swatch--empty {
	background:
		linear-gradient(
			to top right,
			transparent calc(50% - 1px),
			var(--pc-color-outline) calc(50% - 1px) calc(50% + 1px),
			transparent calc(50% + 1px)),
		var(--pc-color-surface);
	border-style: dashed;
}

.pc-color-picker__placeholder {
	overflow: hidden;
	flex: 1 1 auto;
	color: var(--pc-color-on-surface-variant);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-color-picker__clear {
	flex: 0 0 auto;
}

.pc-color-picker__dismiss-layer {
	position: fixed;
	z-index: var(--pc-z-popover, 95);
	inset: 0;
	background: transparent;
}

.pc-color-picker__surface {
	position: absolute;
	z-index: calc(var(--pc-z-popover, 95) + 2);
	top: calc(100% + calc(0.25rem * var(--pc-font-scale, 1)));
	right: auto;
	left: 0;
	display: flex;
	width: min(calc(24rem * var(--pc-font-scale, 1)), calc(100vw - calc(2rem * var(--pc-font-scale, 1))));
	max-width: calc(100vw - calc(2rem * var(--pc-font-scale, 1)));
	flex-direction: column;
	gap: calc(1rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	border: var(--pc-overlay-border);
	border-radius: var(--pc-shape-corner-large);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-color-picker__surface-header,
.pc-color-picker__actions {
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-color-picker__surface-header {
	justify-content: space-between;
}

.pc-color-picker__surface-header h2 {
	margin: 0;
}

.pc-color-picker__preview {
	display: flex;
	min-height: calc(4rem * var(--pc-font-scale, 1));
	align-items: center;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	padding: calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-color-picker__preview-swatch {
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(2.5rem * var(--pc-font-scale, 1));
	background:
		linear-gradient(var(--pc-color-picker-draft), var(--pc-color-picker-draft)),
		var(--pc-color-picker-checker);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
}

.pc-color-picker__preview code {
	font: inherit;
	font-size: calc(1.125rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-color-picker__sliders {
	display: flex;
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-color-picker__sliders > label {
	display: flex;
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-color-picker__slider-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-color-picker__range {
	appearance: none;
	width: 100%;
	height: calc(0.75rem * var(--pc-font-scale, 1));
	margin: 0;
	background: var(--pc-color-surface-container-highest);
	border-radius: var(--pc-shape-corner-full);
	cursor: pointer;
}

.pc-color-picker__range--hue {
	background: linear-gradient(
		to right,
		#f00,
		#ff0,
		#0f0,
		#0ff,
		#00f,
		#f0f,
		#f00);
}

.pc-color-picker__range--saturation {
	background: linear-gradient(
		to right,
		hsl(var(--pc-color-picker-hue) 0% 50%),
		hsl(var(--pc-color-picker-hue) 100% 50%));
}

.pc-color-picker__range--brightness {
	background: linear-gradient(to right, #000, var(--pc-color-picker-full));
}

.pc-color-picker__range--alpha {
	background:
		linear-gradient(to right, transparent, var(--pc-color-picker-opaque)),
		linear-gradient(45deg, var(--pc-color-outline-variant) 25%, transparent 25% 75%, var(--pc-color-outline-variant) 75%) 0 0 / 0.5rem 0.5rem,
		linear-gradient(45deg, var(--pc-color-outline-variant) 25%, transparent 25% 75%, var(--pc-color-outline-variant) 75%) 0.25rem 0.25rem / 0.5rem 0.5rem,
		var(--pc-color-surface);
}

.pc-color-picker__range::-webkit-slider-thumb {
	appearance: none;
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
	background: var(--pc-color-picker-draft);
	border: 3px solid var(--pc-color-surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--pc-color-outline);
}

.pc-color-picker__range::-moz-range-thumb {
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
	background: var(--pc-color-picker-draft);
	border: 3px solid var(--pc-color-surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--pc-color-outline);
}

.pc-color-picker__range:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-color-picker__values {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-color-picker__values label {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-color-picker__values input {
	width: 100%;
	min-width: 0;
	min-height: calc(3rem * var(--pc-font-scale, 1));
	padding: calc(0.625rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-highest);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
	outline: 0;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-color-picker__values input:focus {
	border-color: var(--pc-color-primary);
	box-shadow: inset 0 0 0 1px var(--pc-color-primary);
}

.pc-color-picker__values input[aria-invalid="true"] {
	border-color: var(--pc-color-error);
	box-shadow: inset 0 0 0 1px var(--pc-color-error);
}

.pc-color-picker__format-error {
	color: var(--pc-color-error);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-color-picker__actions {
	justify-content: flex-end;
}

.pc-file-upload {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(1rem * var(--pc-font-scale, 1));
	min-height: calc(6rem * var(--pc-font-scale, 1));
	padding: calc(1.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-low);
	border: 1px dashed var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-medium);
	cursor: pointer;
	transition:
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		border-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-file-upload:focus-within {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-file-upload--error {
	border-color: var(--pc-color-error);
}

.pc-file-upload:hover:not(.pc-file-upload--disabled) {
	background: var(--pc-color-surface-container);
	border-color: var(--pc-color-primary);
}

.pc-file-upload--dragging {
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
	border: 2px solid var(--pc-color-primary);
	box-shadow: inset 0 0 0 2px var(--pc-color-surface);
}

.pc-file-upload--disabled {
	opacity: 0.38;
	cursor: default;
}

/* A read-only upload cannot choose files, but its label and value stay fully legible. */
.pc-file-upload--readonly {
	opacity: 1;
	border-style: dashed;
}

.pc-file-upload__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.pc-file-upload__icon {
	display: grid;
	width: calc(3rem * var(--pc-font-scale, 1));
	height: calc(3rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(3rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
	border-radius: var(--pc-shape-corner-medium);
	transition:
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		transform var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-file-upload--dragging .pc-file-upload__icon {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
	transform: translateY(-2px) scale(1.08);
}

.pc-file-upload__copy {
	display: flex;
	flex-direction: column;
}

.pc-file-upload__label {
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-file-upload__support {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

/* Button presentation: a label styled as a button holding the transparent native input, with
   supporting text and errors below it. */
.pc-file-upload-button,
.pc-file-upload-activator {
	display: inline-flex;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	min-width: 0;
}

.pc-file-upload-button__control {
	overflow: hidden;
	max-width: 100%;
}

.pc-file-upload-button__control > .pc-button__label {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Like the shared button ring, the focus ring is drawn for keyboard focus only. */
.pc-file-upload-button__control:has(.pc-file-upload__input:focus-visible) {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

/* Outranks the keyboard focus ring, so a focused button still shows that it is a drop target. */
.pc-file-upload-button--dragging .pc-file-upload-button__control.pc-button {
	outline: 2px dashed var(--pc-color-primary);
	outline-offset: 3px;
}

.pc-file-upload-button--error .pc-file-upload-button__control {
	box-shadow: 0 0 0 1px var(--pc-color-error);
}

.pc-file-upload-button--disabled .pc-file-upload-button__control {
	cursor: not-allowed;
	opacity: 0.38;
}

/* A label never matches :disabled, so an inactive upload cancels the shared button hover itself. */
.pc-file-upload-button--disabled .pc-file-upload-button__control.pc-button:hover {
	filter: none;
}

.pc-file-upload-button--disabled .pc-file-upload__input {
	cursor: not-allowed;
}

/* A read-only upload cannot choose files, but its label stays fully legible. Every variant shows
   the same muted, dashed outline, so a read-only Filled button does not look enabled. */
.pc-file-upload-button--readonly .pc-file-upload-button__control {
	cursor: default;
	opacity: 1;
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 1px dashed var(--pc-color-outline);
	box-shadow: none;
}

.pc-file-upload-button--readonly .pc-file-upload__input {
	cursor: default;
}

.pc-file-upload-button .pc-file-upload__support,
.pc-file-upload-activator .pc-file-upload__support {
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-autocomplete {
	position: relative;
}

.pc-autocomplete__dismiss-layer {
	position: fixed;
	z-index: var(--pc-z-popover, 95);
	inset: 0;
	background: transparent;
}

.pc-autocomplete--open {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

/* The surface holds the listbox plus any "no results" or "more results" message. */
.pc-autocomplete__list {
	position: absolute;
	z-index: calc(var(--pc-z-popover, 95) + 1);
	top: calc(100% + var(--pc-density-space-xs));
	right: 0;
	left: 0;
	max-height: calc(17.5rem * var(--pc-font-scale, 1));
	margin: 0;
	padding: var(--pc-density-space-sm) 0;
	overflow-x: hidden;
	overflow-y: auto;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container);
	border-radius: var(--pc-shape-corner-extra-small);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-autocomplete__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-autocomplete__option {
	min-height: var(--pc-density-control-large);
	padding: var(--pc-density-space-md) var(--pc-density-space-lg);
	overflow-wrap: anywhere;
	cursor: pointer;
}

/* Focus stays in the input; the keyboard-active option is shown by the highlight (and named to
   assistive technology through aria-activedescendant). */
.pc-autocomplete__option:hover,
.pc-autocomplete__option--active {
	background: var(--pc-color-secondary-container);
}

.pc-autocomplete__option--active {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: -2px;
}

.pc-autocomplete__message {
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-autocomplete__message--more {
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-autocomplete__message--error {
	color: var(--pc-color-error);
}

.pc-autocomplete__progress {
	margin-inline-end: var(--pc-density-space-sm);
}

.pc-multi-select {
	position: relative;
}

.pc-multi-select--open {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

.pc-multi-select__trigger {
	display: flex;
	width: 100%;
	min-height: var(--pc-density-field-input-height);
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-sm) var(--pc-density-space-md) var(--pc-density-space-sm) var(--pc-density-field-padding-inline);
	color: inherit;
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-multi-select__selection {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-xs);
	min-width: 0;
}

.pc-multi-select__placeholder {
	color: var(--pc-color-on-surface-variant);
}

.pc-multi-select__chip,
.pc-multi-select__overflow {
	display: inline-flex;
	min-height: calc(1.75rem * var(--pc-font-scale, 1));
	align-items: center;
	padding-inline: calc(0.625rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
	border-radius: var(--pc-shape-corner-small);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-multi-select__overflow {
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container);
}

.pc-multi-select__dismiss-layer {
	position: fixed;
	z-index: var(--pc-z-popover, 95);
	inset: 0;
	background: transparent;
}

.pc-multi-select__surface {
	position: absolute;
	z-index: calc(var(--pc-z-popover, 95) + 1);
	top: calc(100% + var(--pc-density-space-xs));
	right: 0;
	left: auto;
	display: flex;
	width: min(calc(22.5rem * var(--pc-font-scale, 1)), calc(100vw - calc(2rem * var(--pc-font-scale, 1))));
	min-width: min(100%, calc(100vw - calc(2rem * var(--pc-font-scale, 1))));
	max-width: calc(100vw - calc(2rem * var(--pc-font-scale, 1)));
	flex-direction: column;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container);
	border: var(--pc-overlay-border);
	border-radius: var(--pc-shape-corner-medium);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-multi-select__search .pc-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.pc-multi-select__search .pc-field__container,
.pc-multi-select__search .pc-field__input {
	min-height: var(--pc-density-control-large);
}

.pc-multi-select__toolbar {
	display: flex;
	min-height: var(--pc-density-control-medium);
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-multi-select__select-all {
	display: inline-flex;
	min-height: var(--pc-density-control-medium);
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm);
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	cursor: pointer;
}

.pc-multi-select__select-all:hover,
.pc-multi-select__select-all:focus-visible {
	background: var(--pc-color-surface-container-high);
	outline: 0;
}

.pc-multi-select__check {
	display: inline-grid;
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(1.25rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
	border: 2px solid var(--pc-color-primary);
	border-radius: 2px;
	font-weight: 700;
}

[aria-selected="false"] > .pc-multi-select__check,
.pc-multi-select__select-all[aria-checked="false"] > .pc-multi-select__check,
.pc-multi-select__group-select[aria-checked="false"] > .pc-multi-select__check {
	background: transparent;
	border-color: var(--pc-color-outline);
}

.pc-multi-select__count {
	margin-left: auto;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	white-space: nowrap;
}

.pc-multi-select__display-mode {
	width: 100%;
}

.pc-multi-select__display-mode .pc-segmented-button__item {
	flex: 1 1 0;
	min-width: 0;
}

/* The surface is a column whose search field, toolbar, view switch and actions never scroll or
   shrink; only the list scrolls, clipped to its own bordered box, and it gives up height first
   when the anchored popover has less room than MaxHeight. */
.pc-multi-select__surface > :not(.pc-multi-select__list) {
	flex: 0 0 auto;
}

.pc-multi-select__list {
	min-height: var(--pc-density-row-height);
	flex: 0 1 auto;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pc-color-surface);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-small);
}

.pc-multi-select__option {
	display: flex;
	width: 100%;
	min-height: var(--pc-density-row-height);
	align-items: center;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-multi-select__option:hover,
.pc-multi-select__option:focus-visible {
	background: var(--pc-color-surface-container);
	outline: 0;
}

.pc-multi-select__option[aria-selected="true"] {
	background: color-mix(in srgb, var(--pc-color-secondary-container) 55%, transparent);
}

.pc-multi-select__option:disabled {
	opacity: 0.38;
	cursor: default;
}

/* Compact rows, the same height as a dense select's options. */
.pc-multi-select--dense .pc-multi-select__option {
	min-height: var(--pc-density-control-medium);
	padding-block: var(--pc-density-space-xs);
}

.pc-multi-select__option-copy {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
}

.pc-multi-select__option-support {
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-multi-select__empty {
	display: grid;
	min-height: calc(7rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: center;
}

.pc-multi-select__actions {
	display: flex;
	justify-content: flex-end;
}

/* SelectionText replaces the chips with one line that truncates rather than wrapping. */
.pc-multi-select__summary {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The clear button is positioned over the trigger's end (see .pc-select__clear). */
.pc-multi-select .pc-field__container {
	position: relative;
}

.pc-multi-select--clearable .pc-multi-select__trigger {
	padding-inline-end: calc(var(--pc-density-space-md) + 1.25rem + var(--pc-density-control-medium));
}

/* Grouped options: each group is a heading (whose checkbox selects the group) over its own
   listbox. The heading stays in view while the group's options scroll under it. */
.pc-multi-select__group + .pc-multi-select__group,
.pc-multi-select__group-options + .pc-multi-select__group {
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-multi-select__group-header {
	position: sticky;
	z-index: 1;
	top: 0;
	display: flex;
	align-items: center;
	gap: var(--pc-density-space-xs);
	padding-inline-end: var(--pc-density-space-xs);
	background: var(--pc-color-surface-container-low);
}

.pc-multi-select__group-select {
	display: flex;
	min-width: 0;
	min-height: var(--pc-density-control-medium);
	flex: 1 1 auto;
	align-items: center;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-xs) var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

.pc-multi-select__group-select:hover {
	background: var(--pc-color-surface-container-high);
}

.pc-multi-select__group-select:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: -2px;
}

.pc-multi-select__group-select:disabled {
	opacity: 0.38;
	cursor: default;
}

.pc-multi-select__group-toggle {
	flex: 0 0 auto;
}

.pc-multi-select__group .pc-multi-select__option {
	padding-inline-start: calc(var(--pc-density-space-md) + var(--pc-density-space-lg));
}

.pc-alert {
	--pc-alert-accent-color: var(--pc-color-info);
	--pc-alert-on-accent-color: var(--pc-color-on-info);
	display: flex;
	align-items: flex-start;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-alert-info-color);
	background: var(--pc-alert-info-background);
	border: var(--pc-alert-border);
	border-inline-start-width: var(--pc-alert-accent-width);
	border-inline-start-color: var(--pc-alert-accent-color);
	border-radius: var(--pc-alert-radius);
}

.pc-alert--success {
	--pc-alert-accent-color: var(--pc-color-success);
	--pc-alert-on-accent-color: var(--pc-color-on-success);
	color: var(--pc-alert-success-color);
	background: var(--pc-alert-success-background);
}

.pc-alert--warning {
	--pc-alert-accent-color: var(--pc-color-warning);
	--pc-alert-on-accent-color: var(--pc-color-on-warning);
	color: var(--pc-alert-warning-color);
	background: var(--pc-alert-warning-background);
}

.pc-alert--error {
	--pc-alert-accent-color: var(--pc-color-error);
	--pc-alert-on-accent-color: var(--pc-color-on-error);
	color: var(--pc-alert-error-color);
	background: var(--pc-alert-error-background);
}

/* Variants change the container only; they follow the severity rules so they win over them. */
.pc-alert--filled {
	color: var(--pc-alert-on-accent-color);
	background: var(--pc-alert-accent-color);
	border-color: var(--pc-alert-accent-color);
}

.pc-alert--outlined {
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 1px solid var(--pc-alert-accent-color);
}

.pc-alert--plain {
	color: var(--pc-color-on-surface);
	background: transparent;
	border-color: transparent;
}

.pc-alert--outlined > .pc-alert__icon,
.pc-alert--plain > .pc-alert__icon {
	color: var(--pc-alert-accent-color);
}

/* On the solid fill the dismiss button and uncoloured text, outlined or standard icon actions
   take the alert's on-colour: their surface defaults would not be legible there. Filled, tonal,
   selected and colour-role actions keep their own colours. */
.pc-alert--filled :where(
	.pc-icon-button:not(.pc-icon-button--filled, .pc-icon-button--tonal, .pc-icon-button--selected, [class*="pc-icon-button--color-"]),
	.pc-button--text:not([class*="pc-button--color-"]),
	.pc-button--outlined:not([class*="pc-button--color-"])) {
	--pc-action-foreground: var(--pc-alert-on-accent-color);
	color: var(--pc-action-foreground);
}

.pc-alert--dense {
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.375rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
}

/* Alignment moves the icon and the copy together, as one group; actions and the dismiss button
   stay at the end. Auto margins centre or end-align the group in the space before them. */
.pc-alert--align-center > .pc-alert__copy,
.pc-alert--align-end > .pc-alert__copy {
	flex: 0 1 auto;
}

.pc-alert--align-center > :is(.pc-alert__icon, .pc-alert__copy):first-child,
.pc-alert--align-end > :is(.pc-alert__icon, .pc-alert__copy):first-child {
	margin-inline-start: auto;
}

.pc-alert--align-center > .pc-alert__copy {
	margin-inline-end: auto;
	align-items: center;
	text-align: center;
}

.pc-alert--align-end > .pc-alert__copy {
	align-items: flex-end;
	text-align: end;
}

/* The copy is at least as tall as the 24px icon and centres a single line in it, so a one-line
   alert has the icon centred on its text, while wrapped text starts level with the icon's top.
   Actions and the dismiss button are centred on the icon. */
.pc-alert > :is(.pc-alert__actions, .pc-icon-button) {
	margin-block: calc((24px - var(--pc-density-control-medium)) / 2);
}

.pc-alert__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-height: 24px;
	min-width: 0;
}

.pc-alert__title {
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-alert__message {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-alert__actions {
	display: flex;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	align-items: center;
}

.pc-chip-set {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-chip-set--wrap {
	flex-wrap: wrap;
}

.pc-chip-set--scroll {
	overflow-x: auto;
	flex-wrap: nowrap;
	padding-block: calc(0.125rem * var(--pc-font-scale, 1));
	scrollbar-width: thin;
}

.pc-chip-set__item {
	display: inline-flex;
	flex: none;
	min-width: 0;
}

.pc-chip {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	min-height: var(--pc-density-control-small);
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding-inline: var(--pc-density-space-md);
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-chip-background);
	border: 1px solid var(--pc-chip-border-color);
	border-radius: var(--pc-chip-radius);
	box-shadow: none;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	vertical-align: middle;
	white-space: nowrap;
	transition:
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		border-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-chip--small {
	min-height: calc(1.5rem * var(--pc-font-scale, 1));
	padding-inline: var(--pc-density-space-sm);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-chip--small .pc-icon {
	width: calc(1rem * var(--pc-font-scale, 1));
	height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-chip--interactive {
	padding-left: 0;
}

.pc-chip--action-only {
	padding-right: 0;
}

.pc-chip--dismissible {
	padding-right: 0;
}

.pc-chip--tonal,
.pc-chip--selected {
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
	border-color: transparent;
}

.pc-chip--elevated {
	background: var(--pc-color-surface-container-low);
	border-color: transparent;
	box-shadow: var(--pc-elevation-level-1);
}

.pc-chip--primary:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-primary-container); background: var(--pc-color-primary-container); }
.pc-chip--secondary:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-secondary-container); background: var(--pc-color-secondary-container); }
.pc-chip--tertiary:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-tertiary-container); background: var(--pc-color-tertiary-container); }
.pc-chip--info:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-info-container); background: var(--pc-color-info-container); }
.pc-chip--success:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-success-container); background: var(--pc-color-success-container); }
.pc-chip--warning:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-warning-container); background: var(--pc-color-warning-container); }
.pc-chip--error:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-error-container); background: var(--pc-color-error-container); }
.pc-chip--neutral:is(.pc-chip--tonal, .pc-chip--selected) { color: var(--pc-color-on-surface); background: var(--pc-color-surface-container-high); }

/* Outlined and elevated chips carry a colour as their text (and outlined as their border);
   a selected chip keeps the container pair above. Neutral keeps the default treatment. */
.pc-chip--primary:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-primary); }
.pc-chip--secondary:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-secondary); }
.pc-chip--tertiary:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-tertiary); }
.pc-chip--info:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-info); }
.pc-chip--success:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-success); }
.pc-chip--warning:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-warning); }
.pc-chip--error:is(.pc-chip--outlined, .pc-chip--elevated):not(.pc-chip--selected) { color: var(--pc-color-error); }

.pc-chip--outlined:not(.pc-chip--neutral, .pc-chip--selected),
.pc-chip--outlined:not(.pc-chip--neutral, .pc-chip--selected):is(.pc-chip--interactive, .pc-chip--dismissible):not(.pc-chip--disabled):hover {
	border-color: currentColor;
}

/* Filled paints the colour role itself and stays filled when selected (the check shows state). */
.pc-chip--filled {
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-highest);
	border-color: transparent;
}

.pc-chip--filled.pc-chip--primary { color: var(--pc-color-on-primary); background: var(--pc-color-primary); }
.pc-chip--filled.pc-chip--secondary { color: var(--pc-color-on-secondary); background: var(--pc-color-secondary); }
.pc-chip--filled.pc-chip--tertiary { color: var(--pc-color-on-tertiary); background: var(--pc-color-tertiary); }
.pc-chip--filled.pc-chip--info { color: var(--pc-color-on-info); background: var(--pc-color-info); }
.pc-chip--filled.pc-chip--success { color: var(--pc-color-on-success); background: var(--pc-color-success); }
.pc-chip--filled.pc-chip--warning { color: var(--pc-color-on-warning); background: var(--pc-color-warning); }
.pc-chip--filled.pc-chip--error { color: var(--pc-color-on-error); background: var(--pc-color-error); }
.pc-chip--filled.pc-chip--neutral { color: var(--pc-color-on-surface); background: var(--pc-color-surface-container-highest); }

/* Read-only chips keep their state visible but give no pressable affordance. */
.pc-chip--readonly {
	padding-left: 0;
}

.pc-chip--readonly .pc-chip__action {
	cursor: default;
}

a.pc-chip__action {
	text-decoration: none;
}

.pc-chip--interactive:not(.pc-chip--disabled):hover,
.pc-chip--dismissible:not(.pc-chip--disabled):hover {
	border-color: var(--pc-color-on-surface-variant);
	background-image: linear-gradient(
		color-mix(in srgb, currentColor 8%, transparent),
		color-mix(in srgb, currentColor 8%, transparent));
}

.pc-chip--disabled {
	opacity: 0.38;
}

.pc-chip__action,
.pc-chip__dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: inherit;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.pc-chip__action {
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	min-width: 0;
	padding-inline: var(--pc-density-space-md);
	border-radius: inherit;
}

.pc-chip--dismissible .pc-chip__action {
	padding-right: var(--pc-density-space-sm);
}

.pc-chip--small .pc-chip__action {
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding-inline: var(--pc-density-space-sm);
}

.pc-chip__dismiss {
	flex: none;
	width: calc(1.75rem * var(--pc-font-scale, 1));
	margin-right: calc(0.125rem * var(--pc-font-scale, 1));
	border-radius: var(--pc-shape-corner-full);
}

.pc-chip--small .pc-chip__dismiss {
	width: calc(1.375rem * var(--pc-font-scale, 1));
}

.pc-chip__action:disabled,
.pc-chip__dismiss:disabled {
	cursor: not-allowed;
}

.pc-chip__label {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
}

.pc-chip__action:focus-visible,
.pc-chip__dismiss:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: 2px;
	border-radius: var(--pc-shape-corner-small);
}

.pc-badge-host {
	position: relative;
	display: inline-flex;
}

.pc-badge {
	--pc-badge-inset: calc(-0.5rem * var(--pc-font-scale, 1));
	position: absolute;
	z-index: 1;
	top: var(--pc-badge-inset);
	inset-inline-end: var(--pc-badge-inset);
	display: grid;
	min-width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
	padding-inline: calc(0.3125rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-error);
	background: var(--pc-color-error);
	border: 2px solid var(--pc-color-surface);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-badge--dot {
	--pc-badge-inset: -3px;
	min-width: calc(0.625rem * var(--pc-font-scale, 1));
	width: calc(0.625rem * var(--pc-font-scale, 1));
	height: calc(0.625rem * var(--pc-font-scale, 1));
	padding: 0;
}

.pc-badge--icon {
	padding-inline: 0;
}

.pc-badge--icon .pc-icon {
	width: calc(0.75rem * var(--pc-font-scale, 1));
	height: calc(0.75rem * var(--pc-font-scale, 1));
}

/* Overlap="false": the badge sits just outside the corner instead of covering it. */
.pc-badge-host--offset > .pc-badge {
	--pc-badge-inset: calc(-1rem * var(--pc-font-scale, 1));
}

.pc-badge-host--offset > .pc-badge--dot {
	--pc-badge-inset: calc(-0.5rem * var(--pc-font-scale, 1));
}

.pc-badge-host:is(.pc-badge-host--bottom-start, .pc-badge-host--bottom-center, .pc-badge-host--bottom-end) > .pc-badge {
	top: auto;
	bottom: var(--pc-badge-inset);
}

.pc-badge-host:is(.pc-badge-host--top-start, .pc-badge-host--bottom-start) > .pc-badge {
	inset-inline-end: auto;
	inset-inline-start: var(--pc-badge-inset);
}

/* Centre on the physical axis: the result is the same in either writing direction. */
.pc-badge-host:is(.pc-badge-host--top-center, .pc-badge-host--bottom-center) > .pc-badge {
	inset-inline-end: auto;
	left: 50%;
	transform: translateX(-50%);
}

/* With nothing to decorate, the badge is an inline pill in the text flow. */
.pc-badge-host--standalone > .pc-badge {
	position: static;
	transform: none;
}

.pc-badge--primary { color: var(--pc-color-on-primary); background: var(--pc-color-primary); }
.pc-badge--secondary { color: var(--pc-color-on-secondary); background: var(--pc-color-secondary); }
.pc-badge--tertiary { color: var(--pc-color-on-tertiary); background: var(--pc-color-tertiary); }
.pc-badge--success { color: var(--pc-color-on-success); background: var(--pc-color-success); }
.pc-badge--warning { color: var(--pc-color-on-warning); background: var(--pc-color-warning); }
.pc-badge--info { color: var(--pc-color-on-info); background: var(--pc-color-info); }
.pc-badge--error { color: var(--pc-color-on-error); background: var(--pc-color-error); }
.pc-badge--neutral { color: var(--pc-color-surface); background: var(--pc-color-on-surface-variant); }

.pc-progress-linear {
	position: relative;
	width: 100%;
	height: calc(0.25rem * var(--pc-font-scale, 1));
	overflow: hidden;
	background: var(--pc-progress-track, var(--pc-color-secondary-container));
	border-radius: var(--pc-shape-corner-full);
}

.pc-progress-linear__indicator {
	display: block;
	height: 100%;
	background: var(--pc-progress-color, var(--pc-color-primary));
	border-radius: inherit;
	transition: width var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

.pc-progress-linear.pc-progress--indeterminate .pc-progress-linear__indicator {
	position: absolute;
	width: 40%;
	animation: pc-progress-linear 1.2s infinite var(--pc-motion-easing-standard);
}

@keyframes pc-progress-linear {
	from { left: -40%; }
	to { left: 100%; }
}

.pc-progress-circular {
	width: var(--pc-progress-size);
	height: var(--pc-progress-size);
	transform: rotate(-90deg);
}

.pc-progress-circular svg {
	width: 100%;
	height: 100%;
}

.pc-progress-circular circle {
	fill: none;
	stroke-width: 4;
}

.pc-progress-circular__track {
	stroke: var(--pc-progress-track, var(--pc-color-secondary-container));
}

.pc-progress-circular__indicator {
	stroke: var(--pc-progress-color, var(--pc-color-primary));
	stroke-linecap: round;
	stroke-dasharray: 113.1;
	stroke-dashoffset: calc(113.1 - (113.1 * var(--pc-progress) / 100));
	transition: stroke-dashoffset var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

.pc-progress-circular.pc-progress--indeterminate {
	animation: pc-progress-circular-spin 900ms linear infinite;
	will-change: transform;
}

.pc-progress-circular.pc-progress--indeterminate .pc-progress-circular__indicator {
	stroke-dashoffset: 72;
}

@keyframes pc-progress-circular-spin {
	from { transform: rotate(-90deg); }
	to { transform: rotate(270deg); }
}

/* PlatformProgress Color: the indicator takes the role and the track its container. */
.pc-progress--primary { --pc-progress-color: var(--pc-color-primary); --pc-progress-track: var(--pc-color-primary-container); }
.pc-progress--secondary { --pc-progress-color: var(--pc-color-secondary); --pc-progress-track: var(--pc-color-secondary-container); }
.pc-progress--tertiary { --pc-progress-color: var(--pc-color-tertiary); --pc-progress-track: var(--pc-color-tertiary-container); }
.pc-progress--neutral { --pc-progress-color: var(--pc-color-on-surface-variant); --pc-progress-track: var(--pc-color-surface-container-highest); }
.pc-progress--info { --pc-progress-color: var(--pc-color-info); --pc-progress-track: var(--pc-color-info-container); }
.pc-progress--success { --pc-progress-color: var(--pc-color-success); --pc-progress-track: var(--pc-color-success-container); }
.pc-progress--warning { --pc-progress-color: var(--pc-color-warning); --pc-progress-track: var(--pc-color-warning-container); }
.pc-progress--error { --pc-progress-color: var(--pc-color-error); --pc-progress-track: var(--pc-color-error-container); }

/* PlatformProgress Thickness (Medium is the base rule above). */
.pc-progress-linear.pc-progress--thin { height: calc(0.125rem * var(--pc-font-scale, 1)); }
.pc-progress-linear.pc-progress--thick { height: calc(0.5rem * var(--pc-font-scale, 1)); }
.pc-progress-circular.pc-progress--thin circle { stroke-width: 2; }
.pc-progress-circular.pc-progress--thick circle { stroke-width: 6; }

.pc-skeleton {
	display: inline-block;
	overflow: hidden;
	background:
		linear-gradient(
			90deg,
			var(--pc-color-surface-container-high) 20%,
			var(--pc-color-surface-container-highest) 50%,
			var(--pc-color-surface-container-high) 80%
		);
	background-size: 220% 100%;
	border-radius: var(--pc-shape-corner-small);
	animation: pc-skeleton 1.4s infinite linear;
}

.pc-skeleton--circular {
	border-radius: 50%;
}

@keyframes pc-skeleton {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

.pc-tooltip {
	position: relative;
	display: inline-flex;
}

/* A disabled control swallows pointer events, so the hover would never reach the wrapper:
   let the pointer fall through to the wrapper's own box instead. */
.pc-tooltip[data-pc-tooltip] :is(button, input, select, textarea, fieldset):disabled {
	pointer-events: none;
}

.pc-tooltip[data-pc-tooltip]:has(:is(button, input, select, textarea, fieldset):disabled) {
	cursor: not-allowed;
}

.pc-tooltip__bubble {
	position: absolute;
	z-index: var(--pc-z-tooltip, 85);
	display: none;
	box-sizing: border-box;
	width: max-content;
	max-width: min(calc(15rem * var(--pc-font-scale, 1)), calc(100vw - 1rem));
	padding: calc(0.375rem * var(--pc-font-scale, 1)) calc(0.625rem * var(--pc-font-scale, 1));
	overflow: visible;
	color: var(--pc-color-on-tooltip-container);
	background: var(--pc-color-tooltip-container);
	border: 0;
	border-radius: var(--pc-shape-corner-extra-small);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 400;
	line-height: calc(1rem * var(--pc-font-scale, 1));
	text-align: start;
	white-space: normal;
	cursor: auto;
}

/* Role colours inside every hover hint: see --pc-tooltip-role-weight. */
.pc-tooltip__bubble, .pc-chart-tooltip, .pc-scheduler__tooltip {
	--pc-color-primary: color-mix(in srgb, var(--md-sys-color-primary) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
	--pc-color-secondary: color-mix(in srgb, var(--md-sys-color-secondary) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
	--pc-color-tertiary: color-mix(in srgb, var(--md-sys-color-tertiary) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
	--pc-color-error: color-mix(in srgb, var(--md-sys-color-error) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
	--pc-color-success: color-mix(in srgb, var(--md-sys-color-success) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
	--pc-color-warning: color-mix(in srgb, var(--md-sys-color-warning) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
	--pc-color-info: color-mix(in srgb, var(--md-sys-color-info) var(--pc-tooltip-role-weight, 100%), var(--pc-color-on-tooltip-container));
}

.pc-tooltip__bubble--rich {
	max-width: min(calc(25rem * var(--pc-font-scale, 1)), calc(100vw - 1rem));
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

/* Static prerender and hosts without the module: show in place on hover or keyboard focus.
   The enhanced path (data-tooltip-enhanced) shows the bubble in the top layer instead. The
   bubble is display:none while hidden so it never adds scrollable overflow to a clipped parent. */
.pc-tooltip[data-pc-tooltip]:not([data-tooltip-enhanced]):is(:hover, :focus-visible, :has(:focus-visible)) > .pc-tooltip__bubble,
.pc-tooltip__bubble[data-open] {
	display: block;
}

.pc-tooltip__bubble[data-open] {
	z-index: var(--pc-z-tooltip, 85);
	animation: pc-tooltip-in var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

@keyframes pc-tooltip-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.pc-tooltip--top > .pc-tooltip__bubble {
	bottom: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
	left: 50%;
	transform: translateX(-50%);
}

.pc-tooltip--bottom > .pc-tooltip__bubble {
	top: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
	left: 50%;
	transform: translateX(-50%);
}

.pc-tooltip--start > .pc-tooltip__bubble,
.pc-tooltip--end > .pc-tooltip__bubble,
.pc-tooltip--left > .pc-tooltip__bubble,
.pc-tooltip--right > .pc-tooltip__bubble {
	top: 50%;
	transform: translateY(-50%);
}

.pc-tooltip--start > .pc-tooltip__bubble {
	inset-inline-end: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
}

.pc-tooltip--end > .pc-tooltip__bubble {
	inset-inline-start: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
}

.pc-tooltip--left > .pc-tooltip__bubble {
	right: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
}

.pc-tooltip--right > .pc-tooltip__bubble {
	left: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
}

@media (forced-colors: active) {
	.pc-tooltip__bubble,
	.pc-scheduler__tooltip {
		border: 1px solid CanvasText;
	}
}

.pc-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	min-height: calc(13.75rem * var(--pc-font-scale, 1));
	padding: calc(2rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	text-align: center;
}

.pc-empty-state__icon {
	display: grid;
	width: calc(4rem * var(--pc-font-scale, 1));
	height: calc(4rem * var(--pc-font-scale, 1));
	margin-bottom: calc(0.5rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
	border-radius: var(--pc-shape-corner-extra-large);
}

.pc-empty-state__actions {
	display: flex;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	margin-top: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-async-content {
	min-width: 0;
}

.pc-async-content__loading {
	display: flex;
	min-height: calc(6rem * var(--pc-font-scale, 1));
	align-items: center;
	justify-content: center;
	gap: calc(0.875rem * var(--pc-font-scale, 1));
	padding: calc(1.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
}

.pc-async-content__loading-message {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-snackbar {
	position: fixed;
	z-index: var(--pc-z-snackbar, 100);
	right: calc(1.5rem * var(--pc-font-scale, 1));
	bottom: calc(1.5rem * var(--pc-font-scale, 1));
	display: flex;
	min-width: min(calc(22.5rem * var(--pc-font-scale, 1)), calc(100vw - calc(2rem * var(--pc-font-scale, 1))));
	max-width: calc(35rem * var(--pc-font-scale, 1));
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.375rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1)) calc(0.375rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-inverse-on-surface);
	background: var(--pc-color-inverse-surface);
	border-radius: var(--pc-shape-corner-extra-small);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-snackbar__message {
	flex: 1 1 auto;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-snackbar__action {
	padding: calc(0.625rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	color: var(--pc-color-primary-container);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-full);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.pc-snackbar .pc-icon-button {
	color: inherit;
}

.pc-snackbar__icon {
	flex: 0 0 auto;
}

.pc-snackbar__message--button {
	padding: 0;
	color: inherit;
	text-align: start;
	background: transparent;
	border: 0;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Severity (or the matching colour role): a filled role pair per state. The severity icon and
   the alert/status role carry the meaning too, so it never relies on colour alone. */
.pc-snackbar--info {
	color: var(--pc-color-on-info);
	background: var(--pc-color-info);
}

.pc-snackbar--success {
	color: var(--pc-color-on-success);
	background: var(--pc-color-success);
}

.pc-snackbar--warning {
	color: var(--pc-color-on-warning);
	background: var(--pc-color-warning);
}

.pc-snackbar--error {
	color: var(--pc-color-on-error);
	background: var(--pc-color-error);
}

/* Colour roles (PlatformSnackbar.Color without a severity): the same filled role pairs. Neutral is
   the inverse-surface base style. */
.pc-snackbar--primary {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
}

.pc-snackbar--secondary {
	color: var(--pc-color-on-secondary);
	background: var(--pc-color-secondary);
}

.pc-snackbar--tertiary {
	color: var(--pc-color-on-tertiary);
	background: var(--pc-color-tertiary);
}

.pc-snackbar--primary .pc-snackbar__action,
.pc-snackbar--secondary .pc-snackbar__action,
.pc-snackbar--tertiary .pc-snackbar__action,
.pc-snackbar--info .pc-snackbar__action,
.pc-snackbar--success .pc-snackbar__action,
.pc-snackbar--warning .pc-snackbar__action,
.pc-snackbar--error .pc-snackbar__action {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* PlatformSnackbarHost: one stack at a viewport edge. The stack itself lets clicks through; only
   the messages take pointer input. Messages inside it flow in the stack instead of each being
   fixed to the viewport. */
.pc-snackbar-host {
	--pc-snackbar-enter-offset: 0.5rem;
	position: fixed;
	z-index: var(--pc-z-snackbar, 100);
	display: flex;
	max-width: calc(100vw - calc(3rem * var(--pc-font-scale, 1)));
	flex-direction: column;
	align-items: flex-start;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	inset-block-end: calc(1.5rem * var(--pc-font-scale, 1));
	inset-inline-start: calc(1.5rem * var(--pc-font-scale, 1));
	pointer-events: none;
}

.pc-snackbar-host--bottom-center,
.pc-snackbar-host--top-center {
	inset-inline: auto;
	left: 50%;
	align-items: center;
	translate: -50% 0;
}

.pc-snackbar-host--bottom-end,
.pc-snackbar-host--top-end {
	inset-inline-start: auto;
	inset-inline-end: calc(1.5rem * var(--pc-font-scale, 1));
	align-items: flex-end;
}

.pc-snackbar-host--top-start,
.pc-snackbar-host--top-center,
.pc-snackbar-host--top-end {
	--pc-snackbar-enter-offset: -0.5rem;
	inset-block-start: calc(1.5rem * var(--pc-font-scale, 1));
	inset-block-end: auto;
}

.pc-snackbar-host__item {
	max-width: 100%;
	pointer-events: auto;
}

.pc-snackbar-host .pc-snackbar {
	position: static;
	min-width: min(calc(22.5rem * var(--pc-font-scale, 1)), 100%);
}

@media (prefers-reduced-motion: no-preference) {
	.pc-snackbar-host__item {
		animation: pc-snackbar-enter var(--pc-motion-effects-default-duration, 200ms) var(--pc-motion-effects-default-easing, ease-out) both;
	}
}

@keyframes pc-snackbar-enter {
	from {
		opacity: 0;
		transform: translateY(var(--pc-snackbar-enter-offset, 0.5rem));
	}
}

.pc-overlay,
.pc-dialog-backdrop {
	position: fixed;
	z-index: var(--pc-z-overlay, 90);
	inset: 0;
	display: grid;
	padding: calc(1.5rem * var(--pc-font-scale, 1));
	place-items: center;
	background: rgb(0 0 0 / 0.48);
}

.pc-dialog-backdrop {
	z-index: var(--pc-z-dialog, 91);
}

.pc-overlay__content {
	max-width: min(100%, calc(60rem * var(--pc-font-scale, 1)));
}

/* Covers only the nearest positioned ancestor, on the --pc-z-overlay-contained layer. */
.pc-overlay--contained {
	position: absolute;
	z-index: var(--pc-z-overlay-contained, 45);
	padding: calc(1rem * var(--pc-font-scale, 1));
	border-radius: inherit;
}

.pc-overlay--light {
	background: color-mix(in srgb, var(--pc-color-surface) 72%, transparent);
}

.pc-overlay--transparent {
	background: transparent;
}

/* PlatformOverlay LockScroll and open modal dialogs: reference counted in the RCL module. */
html.pc-scroll-locked,
html.pc-scroll-locked body {
	overflow: hidden;
}

html.pc-scroll-locked--gutter {
	scrollbar-gutter: stable;
}

/* The dialog host and a host chrome that a hosted component's own dialog has taken over take no
   part in layout; their children lay out as if the wrappers were not there. */
.pc-dialog-host,
.pc-dialog-passthrough {
	display: contents;
}

/* Size is carried as a custom property rather than a width per modifier: a side sheet is also a
   size, and a plain `width` on .pc-dialog--sidesheet silently beat .pc-dialog--large purely
   because it came later in the file. */
.pc-dialog {
	--pc-dialog-width: calc(40rem * var(--pc-font-scale, 1));
	/* A grid in the dialog (Plain, or its opaque sticky cells) paints the dialog's own surface. */
	--pc-data-grid-background: var(--pc-dialog-background);
	position: relative;
	display: flex;
	/* The hairline sits inside the size, whatever the host's own box-sizing reset. */
	box-sizing: border-box;
	width: min(100%, var(--pc-dialog-width));
	max-height: min(90vh, calc(56.25rem * var(--pc-font-scale, 1)));
	flex-direction: column;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-dialog-background);
	border: var(--pc-dialog-border, var(--pc-overlay-border));
	border-radius: var(--pc-dialog-radius);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-dialog--extrasmall { --pc-dialog-width: calc(20rem * var(--pc-font-scale, 1)); }
.pc-dialog--small { --pc-dialog-width: calc(26.25rem * var(--pc-font-scale, 1)); }
.pc-dialog--large { --pc-dialog-width: calc(56.25rem * var(--pc-font-scale, 1)); }
.pc-dialog--extralarge { --pc-dialog-width: calc(75rem * var(--pc-font-scale, 1)); }

/* As wide as the content, up to the size (or Width) - never past the viewport. */
.pc-dialog--fit-content {
	width: fit-content;
	min-width: min(100%, calc(17.5rem * var(--pc-font-scale, 1)));
	max-width: min(100%, var(--pc-dialog-width));
}

.pc-dialog--fullscreen { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }

.pc-dialog-backdrop:has(> .pc-dialog--fullscreen) {
	padding: 0;
}

.pc-dialog-backdrop--sidesheet {
	padding: 0;
	place-items: stretch end;
}

.pc-dialog--sidesheet {
	--pc-dialog-width: calc(34rem * var(--pc-font-scale, 1));
	height: 100%;
	max-height: none;
	border-radius: var(--pc-dialog-radius) 0 0 var(--pc-dialog-radius);
	/* Its other edges run along the viewport; only the edge facing the page keeps the hairline. */
	border-block: 0;
	border-inline-end: 0;
}

/* Each size stays narrower than its centred equivalent - a side sheet earns its keep by leaving
   the page visible beside it. */
.pc-dialog--sidesheet.pc-dialog--extrasmall { --pc-dialog-width: calc(20rem * var(--pc-font-scale, 1)); }
.pc-dialog--sidesheet.pc-dialog--small { --pc-dialog-width: calc(24rem * var(--pc-font-scale, 1)); }
.pc-dialog--sidesheet.pc-dialog--large { --pc-dialog-width: calc(52rem * var(--pc-font-scale, 1)); }
.pc-dialog--sidesheet.pc-dialog--extralarge { --pc-dialog-width: calc(64rem * var(--pc-font-scale, 1)); }

.pc-dialog--sidesheet.pc-dialog--fullscreen {
	width: 100%;
	border-radius: 0;
}

/* The title icon and the header buttons are centred on the title's first line. */
.pc-dialog__header {
	--pc-dialog-title-line: calc(2rem * var(--pc-font-scale, 1));
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(1rem * var(--pc-font-scale, 1));
	padding: calc(1.5rem * var(--pc-font-scale, 1)) calc(1.5rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	border-bottom: var(--pc-dialog-header-border);
}

.pc-dialog__heading {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-dialog__title-icon {
	flex: 0 0 auto;
	margin-block: calc((var(--pc-dialog-title-line) - 24px) / 2);
	color: var(--pc-color-primary);
}

.pc-dialog__titles {
	min-width: 0;
}

.pc-dialog__title {
	overflow-wrap: anywhere;
}

.pc-dialog__header-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-block: calc((var(--pc-dialog-title-line) - var(--pc-density-control-medium)) / 2);
	gap: var(--pc-density-space-xs);
}

/* Takes the slack in the column so the actions row stays pinned to the bottom of a full-height
   side sheet, and shrinks below its content so long forms scroll here rather than pushing the
   header and actions out of view. */
.pc-dialog__content {
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	padding:
		calc(var(--pc-dialog-content-space, 0rem) * var(--pc-font-scale, 1))
		calc(1.5rem * var(--pc-font-scale, 1))
		calc(1.5rem * var(--pc-font-scale, 1));
	overflow-y: auto;
}

.pc-dialog--headless > .pc-dialog__content {
	padding-top: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	justify-content: var(--pc-dialog-actions-justify, flex-end);
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(1.5rem * var(--pc-font-scale, 1)) calc(1.5rem * var(--pc-font-scale, 1));
	border-top: var(--pc-dialog-actions-border);
}

.pc-dialog__actions--stretch > * {
	flex: 1 1 0;
}

/* Busy: a light veil over the whole surface with the status in a raised chip, readable over any
   content beneath it. */
.pc-dialog__busy {
	border-radius: inherit;
}

.pc-dialog__busy-status {
	display: flex;
	max-width: calc(20rem * var(--pc-font-scale, 1));
	flex-direction: column;
	align-items: center;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1)) calc(1.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-large);
	box-shadow: var(--pc-elevation-level-2);
	text-align: center;
}

.pc-dialog__busy-text {
	margin: 0;
}

.pc-message-box__message {
	margin: 0;
	white-space: pre-line;
}

.pc-expansion-panels {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-sm);
}

/* FillContainer: a grid in which every panel spans a header row and a body row (rows: subgrid). Header
   rows are max-content, so a closed or open header never shrinks or clips; body rows are
   minmax(0, max-content), so open bodies keep their natural height while they fit and otherwise share
   the space left under the parent's maximum height equally, each scrolling its own content. Panel
   spacing uses margins because a row gap would also open between each panel's header and body.
   height: 100% with max-height: max-content gives the rows a definite height of min(parent, content),
   so the group still collapses to its content and treats the parent only as a maximum (track sizing
   ignores a percentage max-height alone). */
.pc-expansion-panels--fill-container {
	display: grid;
	height: 100%;
	max-height: max-content;
	min-height: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: max-content minmax(0, max-content);
	align-content: start;
	gap: 0;
	overflow: visible;
}

.pc-expansion-panel {
	min-width: 0;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-low);
	border-radius: var(--pc-shape-corner-medium);
	box-shadow: var(--pc-elevation-level-1);
}

.pc-expansion-panels--outlined > .pc-expansion-panel,
.pc-expansion-panel--outlined {
	border: 1px solid var(--pc-color-outline-variant);
}

.pc-expansion-panels--fill-container > .pc-expansion-panel {
	display: grid;
	min-height: 0;
	grid-column: 1;
	grid-row: span 2;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	row-gap: 0;
}

/* A closed panel is a plain box in its header row: as a subgrid its lower border would land in the
   empty body row and be lost. */
.pc-expansion-panels--fill-container > .pc-expansion-panel[data-expanded="false"] {
	display: block;
}

.pc-expansion-panels--fill-container > .pc-expansion-panel + .pc-expansion-panel {
	margin-top: var(--pc-density-space-sm);
}

.pc-expansion-panels--fill-container > .pc-expansion-panel > .pc-expansion-panel__summary {
	grid-row: 1;
}

/* The body, not the panel, clips: the panel stays a plain subgrid and the footer keeps the panel's
   rounded lower corners. */
.pc-expansion-panels--fill-container > .pc-expansion-panel > .pc-expansion-panel__body {
	grid-row: 2;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

.pc-expansion-panel__summary {
	display: flex;
	width: 100%;
	min-height: var(--pc-density-row-height);
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-lg);
	padding: var(--pc-density-space-md) var(--pc-density-space-lg);
	color: inherit;
	background: transparent;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-expansion-panel--dense > .pc-expansion-panel__summary {
	min-height: var(--pc-density-control-large);
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
}

.pc-expansion-panel--disabled > .pc-expansion-panel__summary {
	cursor: default;
	opacity: 0.56;
}

.pc-expansion-panel__summary:focus-visible {
	border-radius: inherit;
	outline: 2px solid var(--pc-color-primary);
	outline-offset: -2px;
}

.pc-expansion-panel__summary > .pc-icon {
	flex: 0 0 auto;
	transition: transform var(--pc-motion-duration-medium) var(--pc-motion-easing-standard);
}

.pc-expansion-panel[data-expanded="true"] > .pc-expansion-panel__summary > .pc-icon {
	transform: rotate(180deg);
}

.pc-expansion-panel__headline {
	display: flex;
	flex-direction: column;
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-expansion-panel__custom-header {
	display: flex;
	min-width: 0;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
}

.pc-expansion-panel__support {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 400;
}

.pc-expansion-panel__body {
	display: grid;
	min-height: 0;
	grid-template-rows: minmax(0, 1fr) auto;
}

.pc-expansion-panel__content {
	padding: 0 var(--pc-density-space-lg) var(--pc-density-space-lg);
}

.pc-expansion-panel--dense .pc-expansion-panel__content {
	padding-bottom: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-expansion-panel--no-gutters .pc-expansion-panel__content {
	padding-inline: 0;
}

/* MaxHeight: the panel's own content scrolls past the cap; the header and footer stay put. */
.pc-expansion-panel--max-height > .pc-expansion-panel__body > .pc-expansion-panel__content {
	max-height: var(--pc-expansion-panel-max-height);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The capped content is focusable so the keyboard can scroll it. */
.pc-expansion-panel--max-height > .pc-expansion-panel__body > .pc-expansion-panel__content:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: -2px;
}

.pc-expansion-panels--fill-container .pc-expansion-panel__body {
	overflow: hidden;
}

.pc-expansion-panels--fill-container .pc-expansion-panel__content {
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.pc-expansion-panel__footer {
	padding: calc(0.625rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container);
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-expansion-panel--no-gutters .pc-expansion-panel__footer {
	padding-inline: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-list {
	display: flex;
	flex-direction: column;
	padding-block: var(--pc-density-space-sm);
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface);
	border-radius: var(--pc-shape-corner-medium);
}

/* Rows never shrink: the explicit min-height replaces a flex item's content-based minimum, so in a
   height-capped, scrolling list multi-line rows would otherwise collapse and overlap their neighbours. */
.pc-list__item {
	display: flex;
	flex-shrink: 0;
	width: 100%;
	min-height: var(--pc-density-row-height);
	align-items: center;
	gap: var(--pc-density-space-lg);
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: inherit;
	background: transparent;
	border: 0;
	font: inherit;
	text-align: left;
}

.pc-list__entry {
	display: flex;
	flex-shrink: 0;
	min-width: 0;
}

.pc-list__item--interactive {
	cursor: pointer;
	text-decoration: none;
}

.pc-list__item--interactive:hover,
.pc-list__item--interactive:focus-visible {
	background: var(--pc-color-surface-container);
	outline: 0;
}

.pc-list__item--interactive:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pc-color-primary);
}

.pc-list__item--interactive:disabled,
.pc-list__item--disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 48%, transparent);
	background: transparent;
	cursor: not-allowed;
}

.pc-list__content {
	flex: 1 1 auto;
	min-width: 0;
}

.pc-list--dense {
	padding-block: var(--pc-density-space-xs);
}

.pc-list--dense .pc-list__item {
	min-height: calc(var(--pc-density-row-height) * 0.75);
	gap: var(--pc-density-space-md);
	padding-block: var(--pc-density-space-xs);
}

.pc-list--dense .pc-list__primary {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-list__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.pc-list__primary {
	font-size: calc(1rem * var(--pc-font-scale, 1));
	line-height: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-list__support,
.pc-list__trailing {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-avatar {
	display: inline-grid;
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	flex: 0 0 auto;
	overflow: hidden;
	place-items: center;
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
	border-radius: 50%;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-avatar--extra-small { width: calc(1.5rem * var(--pc-font-scale, 1)); height: calc(1.5rem * var(--pc-font-scale, 1)); font-size: calc(0.75rem * var(--pc-font-scale, 1)); font-weight: 600; }
.pc-avatar--extra-small .pc-icon { width: calc(1rem * var(--pc-font-scale, 1)); height: calc(1rem * var(--pc-font-scale, 1)); }
.pc-avatar--small { width: calc(2rem * var(--pc-font-scale, 1)); height: calc(2rem * var(--pc-font-scale, 1)); font-size: calc(0.75rem * var(--pc-font-scale, 1)); }
.pc-avatar--large { width: calc(3.5rem * var(--pc-font-scale, 1)); height: calc(3.5rem * var(--pc-font-scale, 1)); font-size: calc(1rem * var(--pc-font-scale, 1)); }
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pc-avatar--primary { color: var(--pc-color-on-primary-container); background: var(--pc-color-primary-container); }
.pc-avatar--secondary { color: var(--pc-color-on-secondary-container); background: var(--pc-color-secondary-container); }
.pc-avatar--tertiary { color: var(--pc-color-on-tertiary-container); background: var(--pc-color-tertiary-container); }
.pc-avatar--info { color: var(--pc-color-on-info-container); background: var(--pc-color-info-container); }
.pc-avatar--success { color: var(--pc-color-on-success-container); background: var(--pc-color-success-container); }
.pc-avatar--warning { color: var(--pc-color-on-warning-container); background: var(--pc-color-warning-container); }
.pc-avatar--error { color: var(--pc-color-on-error-container); background: var(--pc-color-error-container); }
.pc-avatar--neutral { color: var(--pc-color-on-surface-variant); background: var(--pc-color-surface-container-highest); }

/*
 * PlatformImage renders a bare, inline img (class pc-image pc-image__source) so attributes and
 * text flow behave like a plain image. A Caption wraps it in a block figure (pc-image--figure);
 * a DarkSource without a caption wraps both sources in an inline-block span.
 */
.pc-image--figure {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	margin: 0;
}

.pc-image--theme-aware:not(.pc-image--figure) {
	display: inline-block;
	max-width: 100%;
}

.pc-image--figure > .pc-image__source,
.pc-image--theme-aware > .pc-image__source {
	display: block;
}

.pc-image__source {
	border-radius: var(--pc-shape-corner-medium);
	object-fit: cover;
}

/* A fluid image (the default) shrinks to its container and keeps its aspect ratio; a fixed
   image (Fluid="false") keeps its width and height attributes as its box. */
.pc-image__source:where(:not(.pc-image__source--fixed)) {
	max-width: 100%;
	height: auto;
}

.pc-image__source--fit-contain { object-fit: contain; }
.pc-image__source--fit-fill { object-fit: fill; }
.pc-image__source--fit-none { object-fit: none; }
.pc-image__source--fit-scale-down { object-fit: scale-down; }
.pc-image__source--square { border-radius: 0; }
.pc-image__source--elevation-1 { box-shadow: var(--pc-elevation-level-1); }
.pc-image__source--elevation-2 { box-shadow: var(--pc-elevation-level-2); }
.pc-image__source--elevation-3 { box-shadow: var(--pc-elevation-level-3); }

.pc-image__source--dark {
	display: none !important;
}

.pc-theme[data-theme="dark"] .pc-image--theme-aware .pc-image__source--light {
	display: none;
}

.pc-theme[data-theme="dark"] .pc-image__source--dark {
	display: block !important;
}

.pc-image figcaption {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-description-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(11.25rem * var(--pc-font-scale, 1)), 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	background: var(--pc-color-outline-variant);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-description-list__item {
	min-width: 0;
	padding: calc(0.75rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-low);
}

.pc-description-list dt {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

/* Values wrap inside their cell. The list clips its own overflow to keep the 1px grid lines clean,
   so a value with no break opportunity - a file name, an email address, a reference - was simply
   cut off at the cell edge rather than wrapping onto a second line. */
.pc-description-list dd {
	margin: calc(0.25rem * var(--pc-font-scale, 1)) 0 0;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	overflow-wrap: anywhere;
}

/*
 * Static tables: the pc-table class family styles plain, semantic <table> markup (read-only
 * key/value lists and small multi-column tables) on the theme tokens. Use PlatformDataGrid for
 * sorting, filtering, paging, selection or editing.
 *
 *   <div class="pc-table-scroller">                 optional: contains horizontal overflow
 *     <table class="pc-table pc-table--dense pc-table--striped pc-table--hover pc-table--bordered">
 *       <caption>…</caption> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot>
 *     </table>
 *   </div>
 *
 * Modifiers (combine freely):
 * - pc-table--dense          compact cell padding;
 * - pc-table--striped        tints alternate body rows;
 * - pc-table--hover          highlights the body row under the pointer;
 * - pc-table--bordered       draws every cell border, not only row separators;
 * - pc-table--sticky-header  keeps the header row visible inside a scrolling pc-table-scroller
 *                            (give the scroller a max-height).
 * Cell padding follows the density tokens; th[scope="row"] styles a key column.
 */
.pc-table-scroller {
	max-width: 100%;
	overflow: auto;
}

.pc-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--pc-color-on-surface);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
}

.pc-table caption {
	padding-block: var(--pc-density-space-sm);
	color: var(--pc-color-on-surface-variant);
	text-align: start;
	caption-side: top;
}

.pc-table th,
.pc-table td {
	padding: var(--pc-density-space-lg) var(--pc-density-cell-padding-inline);
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

.pc-table thead th {
	color: var(--pc-color-on-surface-variant);
	font-weight: 500;
	background: var(--pc-color-surface-container-low);
}

.pc-table tbody th {
	font-weight: 500;
}

.pc-table tfoot th,
.pc-table tfoot td {
	font-weight: 500;
	border-bottom: 0;
}

.pc-table--dense th,
.pc-table--dense td {
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
}

.pc-table--striped > tbody > tr:nth-child(odd) > * {
	background: color-mix(in srgb, var(--pc-color-on-surface) 4%, transparent);
}

.pc-table--hover > tbody > tr:hover > * {
	background: color-mix(in srgb, var(--pc-color-on-surface) 8%, transparent);
}

.pc-table--bordered {
	border-top: 1px solid var(--pc-color-outline-variant);
	border-inline-start: 1px solid var(--pc-color-outline-variant);
}

.pc-table--bordered th,
.pc-table--bordered td {
	border-inline-end: 1px solid var(--pc-color-outline-variant);
}

.pc-table--bordered tfoot th,
.pc-table--bordered tfoot td {
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

/* Local stacking only: keeps positioned cell content (chips, badges) from painting over the header. */
.pc-table--sticky-header > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
}

.pc-rating {
	--pc-rating-color: var(--pc-color-primary);
	display: inline-flex;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
}

.pc-rating__stars {
	display: inline-flex;
	gap: .0625em;
	line-height: 0;
}

.pc-rating__star {
	position: relative;
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 1.25em;
}

.pc-rating__outline,
.pc-rating__fill svg {
	position: absolute;
	inset: 0;
	width: 1.25em;
	height: 1.25em;
}

.pc-rating__outline {
	fill: var(--pc-color-outline);
}

.pc-rating__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--pc-rating-fill);
	overflow: hidden;
	color: var(--pc-rating-color);
}

.pc-rating__fill svg {
	max-width: none;
	fill: currentColor;
}

.pc-rating__value {
	color: var(--pc-color-on-surface-variant);
	font-size: .875em;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

.pc-rating--secondary { --pc-rating-color: var(--pc-color-secondary); }
.pc-rating--tertiary { --pc-rating-color: var(--pc-color-tertiary); }
.pc-rating--neutral { --pc-rating-color: var(--pc-color-on-surface-variant); }
.pc-rating--info { --pc-rating-color: var(--pc-color-info); }
.pc-rating--success { --pc-rating-color: var(--pc-color-success); }
.pc-rating--warning { --pc-rating-color: var(--pc-color-warning); }
.pc-rating--error { --pc-rating-color: var(--pc-color-error); }

.pc-highlighter {
	color: var(--pc-color-on-tertiary-container);
	background: var(--pc-color-tertiary-container);
	border-radius: 2px;
}

.pc-color--primary { --pc-component-color: var(--pc-color-primary); --pc-component-container: var(--pc-color-primary-container); }
.pc-color--secondary { --pc-component-color: var(--pc-color-secondary); --pc-component-container: var(--pc-color-secondary-container); }
.pc-color--tertiary { --pc-component-color: var(--pc-color-tertiary); --pc-component-container: var(--pc-color-tertiary-container); }
.pc-color--info { --pc-component-color: var(--pc-color-info); --pc-component-container: var(--pc-color-info-container); }
.pc-color--success { --pc-component-color: var(--pc-color-success); --pc-component-container: var(--pc-color-success-container); }
.pc-color--warning { --pc-component-color: var(--pc-color-warning); --pc-component-container: var(--pc-color-warning-container); }
.pc-color--error { --pc-component-color: var(--pc-color-error); --pc-component-container: var(--pc-color-error-container); }
.pc-color--neutral { --pc-component-color: var(--pc-color-on-surface-variant); --pc-component-container: var(--pc-color-surface-container-high); }
.pc-chart-color--1 { --pc-component-color: var(--pc-chart-series-1); }
.pc-chart-color--2 { --pc-component-color: var(--pc-chart-series-2); }
.pc-chart-color--3 { --pc-component-color: var(--pc-chart-series-3); }
.pc-chart-color--4 { --pc-component-color: var(--pc-chart-series-4); }
.pc-chart-color--5 { --pc-component-color: var(--pc-chart-series-5); }
.pc-chart-color--6 { --pc-component-color: var(--pc-chart-series-6); }
.pc-chart-color--7 { --pc-component-color: var(--pc-chart-series-7); }
.pc-chart-color--8 { --pc-component-color: var(--pc-chart-series-8); }

.pc-bar-chart {
	display: flex;
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	min-height: calc(17.5rem * var(--pc-font-scale, 1));
	margin: 0;
}

.pc-bar-chart__plot {
	display: flex;
	height: calc(15rem * var(--pc-font-scale, 1));
	align-items: stretch;
	padding: calc(1rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1)) 0;
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

.pc-bar-chart__item {
	display: grid;
	flex: 1 1 0;
	grid-template-rows: calc(1.5rem * var(--pc-font-scale, 1)) 1fr calc(2rem * var(--pc-font-scale, 1));
	gap: var(--pc-density-space-xs);
	min-width: 0;
	text-align: center;
}

.pc-bar-chart__values,
.pc-bar-chart__bar-group {
	display: flex;
	width: calc(100% * var(--pc-bar-width-ratio, 0.4));
	min-width: calc(0.125rem * var(--pc-font-scale, 1));
	margin-inline: auto;
	gap: calc(0.1875rem * var(--pc-font-scale, 1));
}

.pc-bar-chart__values {
	align-items: end;
}

.pc-bar-chart__values > .pc-bar-chart__value {
	min-width: 0;
	flex: 1 1 0;
}

.pc-bar-chart__value,
.pc-bar-chart__label {
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-bar-chart__bar-track {
	display: flex;
	min-width: 0;
	flex: 1 1 0;
	align-items: flex-end;
	justify-content: center;
}

.pc-bar-chart__bar {
	width: 100%;
	min-height: 2px;
	background: var(--pc-component-color);
	border-radius: var(--pc-shape-corner-small) var(--pc-shape-corner-small) 0 0;
}

.pc-bar-chart__legend {
	justify-content: center;
}

.pc-bar-chart figcaption {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: center;
}

.pc-carousel {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-carousel__viewport {
	overflow: hidden;
	border-radius: var(--pc-shape-corner-large);
}

.pc-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

/* Horizontal swipes reach the component; vertical pans still scroll the page. */
.pc-carousel__viewport--swipe {
	touch-action: pan-y;
}

.pc-carousel__indicators {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Each indicator is a 1.5rem target that paints a small dot (or the active pill). */
.pc-carousel__indicator {
	display: grid;
	min-width: calc(1.5rem * var(--pc-font-scale, 1));
	height: calc(1.5rem * var(--pc-font-scale, 1));
	padding: 0;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-full);
	cursor: pointer;
}

.pc-carousel__indicator::before {
	width: calc(0.5rem * var(--pc-font-scale, 1));
	height: calc(0.5rem * var(--pc-font-scale, 1));
	content: "";
	background: var(--pc-color-outline-variant);
	border-radius: 50%;
	transition: width var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-carousel__indicator:hover::before {
	background: var(--pc-color-on-surface-variant);
}

.pc-carousel__indicator:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: 1px;
}

.pc-carousel__indicator--active {
	min-width: calc(2rem * var(--pc-font-scale, 1));
}

.pc-carousel__indicator--active::before,
.pc-carousel__indicator--active:hover::before {
	width: calc(1.5rem * var(--pc-font-scale, 1));
	background: var(--pc-color-primary);
	border-radius: var(--pc-shape-corner-full);
}

@media (forced-colors: active) {
	.pc-carousel__indicator::before {
		background: ButtonText;
	}

	.pc-carousel__indicator--active::before {
		background: Highlight;
	}
}

.pc-image-lightbox .pc-dialog__content {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
}

/* A lightbox can be launched from another modal (for example, historical test-result detail).
   Keep it above the originating dialog even when that dialog renders later in document order. */
.pc-dialog-backdrop:has(> .pc-image-lightbox) {
	z-index: calc(var(--pc-z-dialog, 91) + 1);
}

.pc-image-lightbox__carousel {
	width: 100%;
	min-width: 0;
}

.pc-image-lightbox__figure {
	position: relative;
	display: grid;
	/* The last term is what the dialog's max-height leaves after its title, carousel controls and
	   actions; without it a short window clips the photo's bottom edge and caption. */
	height: min(62vh, calc(45rem * var(--pc-font-scale, 1)), calc(min(90vh, calc(56.25rem * var(--pc-font-scale, 1))) - calc(15.5rem * var(--pc-font-scale, 1))));
	min-height: calc(15rem * var(--pc-font-scale, 1));
	margin: 0;
	place-items: center;
	background: var(--pc-color-surface-container-lowest);
}

.pc-image-lightbox__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	user-select: none;
}

.pc-image-lightbox__figure figcaption {
	position: absolute;
	bottom: calc(0.75rem * var(--pc-font-scale, 1));
	left: 50%;
	overflow: hidden;
	max-width: calc(100% - 2rem);
	padding: calc(0.375rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	color: var(--pc-color-inverse-on-surface);
	background: color-mix(in srgb, var(--pc-color-inverse-surface) 88%, transparent);
	border-radius: var(--pc-shape-corner-small);
	font-size: calc(0.8125rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	transform: translateX(-50%);
	white-space: nowrap;
}

.pc-image-lightbox__position {
	margin-inline-end: auto;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-image-lightbox__original,
.pc-image-lightbox__download {
	text-decoration: none;
}

.pc-image-lightbox.pc-dialog--fullscreen .pc-image-lightbox__figure {
	height: calc(100dvh - 13rem);
	max-height: none;
}

.pc-tree,
.pc-tree ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-tree .pc-tree__children {
	margin-inline-start: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-tree__row {
	display: flex;
	min-height: calc(2.75rem * var(--pc-font-scale, 1));
	align-items: center;
	border-radius: var(--pc-shape-corner-small);
}

.pc-tree--dense .pc-tree__row {
	min-height: calc(2rem * var(--pc-font-scale, 1));
}

.pc-tree__row--selected {
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
}

.pc-tree__spacer,
.pc-tree__toggle {
	flex: none;
	width: var(--pc-density-control-medium);
}

.pc-tree--dense .pc-tree__toggle {
	height: var(--pc-density-control-small);
}

.pc-tree__toggle {
	display: inline-grid;
	place-items: center;
	cursor: pointer;
}

.pc-tree__toggle:focus-visible,
.pc-tree__checkbox:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: -2px;
}

/* A button with role="checkbox" paints the same box as PlatformCheckbox, including mixed. */
.pc-tree__checkbox {
	display: inline-grid;
	flex: none;
	width: var(--pc-density-control-medium);
	height: var(--pc-density-control-small);
	padding: 0;
	place-items: center;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	cursor: pointer;
}

.pc-tree__checkbox-box {
	display: grid;
	width: calc(1.125rem * var(--pc-font-scale, 1));
	height: calc(1.125rem * var(--pc-font-scale, 1));
	place-items: center;
	color: transparent;
	border: 2px solid var(--pc-color-on-surface-variant);
	border-radius: 2px;
}

.pc-tree__checkbox-box > .pc-icon {
	width: calc(0.875rem * var(--pc-font-scale, 1));
	height: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-tree__checkbox:is(.pc-tree__checkbox--checked, .pc-tree__checkbox--mixed) .pc-tree__checkbox-box {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
	border-color: var(--pc-color-primary);
}

.pc-tree--readonly .pc-tree__checkbox {
	cursor: default;
}

.pc-tree--readonly .pc-tree__checkbox-box {
	border-style: dashed;
}

@media (forced-colors: active) {
	.pc-tree__checkbox:is(.pc-tree__checkbox--checked, .pc-tree__checkbox--mixed) .pc-tree__checkbox-box {
		color: HighlightText;
		background: Highlight;
		border-color: Highlight;
	}
}

.pc-tree__label {
	flex: 1 1 auto;
	align-self: stretch;
	padding: calc(0.5rem * var(--pc-font-scale, 1));
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

button.pc-tree__label:hover,
button.pc-tree__label:focus-visible {
	background: var(--pc-color-surface-container);
	outline: 0;
}

button.pc-tree__label:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pc-color-primary);
}

.pc-tree__label--static {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--pc-density-space-sm);
	cursor: auto;
}

label.pc-tree__label--static {
	cursor: pointer;
}

.pc-tree__row--selected button.pc-tree__label:hover {
	background: transparent;
}

.pc-reorder-list {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-reorder-list__item {
	display: flex;
	min-height: calc(3.5rem * var(--pc-font-scale, 1));
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.25rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1)) calc(0.25rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-reorder-list__content {
	flex: 1 1 auto;
}

.pc-reorder-list__actions {
	display: flex;
}

.pc-schedule {
	display: flex;
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-schedule__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(1rem * var(--pc-font-scale, 1));
}

.pc-schedule__header > span {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-schedule__timeline {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-schedule__item {
	display: grid;
	grid-template-columns: minmax(calc(8.125rem * var(--pc-font-scale, 1)), auto) 1fr;
	grid-template-areas:
		"time title"
		"time support";
	gap: 2px calc(1rem * var(--pc-font-scale, 1));
	padding: calc(0.75rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-component-container);
	border: 0;
	border-left: calc(0.25rem * var(--pc-font-scale, 1)) solid var(--pc-component-color);
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-schedule__time { grid-area: time; color: var(--pc-color-on-surface-variant); font-size: calc(0.875rem * var(--pc-font-scale, 1)); }
.pc-schedule__title { grid-area: title; font-weight: 500; }
.pc-schedule__support { grid-area: support; color: var(--pc-color-on-surface-variant); font-size: calc(0.75rem * var(--pc-font-scale, 1)); }

/* App bar height tokens: --pc-app-bar-height is also the offset a host gives a fixed bar's page
   and a clipped drawer's top edge. The colour tokens are deliberately not declared by the library:
   a host (or a generated partner stylesheet) sets --pc-app-bar-background/--pc-app-bar-foreground
   on any ancestor to repaint every app bar in that scope, whichever colour role it uses. */
.pc-app-bar {
	display: flex;
	min-height: var(--pc-app-bar-height);
	align-items: center;
	gap: var(--pc-density-space-lg);
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: var(--pc-app-bar-foreground, var(--pc-color-on-surface));
	background: var(--pc-app-bar-background, var(--pc-color-surface));
}

.pc-app-bar--primary {
	color: var(--pc-app-bar-foreground, var(--pc-color-on-primary));
	background: var(--pc-app-bar-background, var(--pc-color-primary));
}

/* Standard icon buttons and the supporting line follow the bar's colours: on-surface-variant on a
   surface bar, on-primary on a primary bar, and a host's --pc-app-bar-foreground on any bar in its
   scope - the bar's own background would make their surface defaults illegible. Filled, tonal,
   selected and colour-role buttons keep their own colours. */
.pc-app-bar :where(.pc-icon-button:not(.pc-icon-button--filled, .pc-icon-button--tonal, .pc-icon-button--selected, [class*="pc-icon-button--color-"])),
.pc-app-bar :where(.pc-app-bar__support) {
	--pc-action-foreground: var(--pc-app-bar-foreground, var(--pc-color-on-surface-variant));
	color: var(--pc-action-foreground);
}

.pc-app-bar--primary :where(.pc-icon-button:not(.pc-icon-button--filled, .pc-icon-button--tonal, .pc-icon-button--selected, [class*="pc-icon-button--color-"])),
.pc-app-bar--primary :where(.pc-app-bar__support) {
	--pc-action-foreground: var(--pc-app-bar-foreground, var(--pc-color-on-primary));
}

/* A menu, dialog, drawer or popover opened from the bar sits on its own surface: its icon buttons
   keep their usual colour there. */
.pc-app-bar :is(.pc-menu__surface, .pc-dialog, .pc-drawer, .pc-overlay, [popover]) :where(.pc-icon-button:not(.pc-icon-button--filled, .pc-icon-button--tonal, .pc-icon-button--selected, [class*="pc-icon-button--color-"])) {
	--pc-action-foreground: var(--pc-action-color, var(--pc-color-on-surface-variant));
	color: var(--pc-action-foreground);
}

.pc-app-bar--dense {
	min-height: var(--pc-app-bar-dense-height);
	padding-block: var(--pc-density-space-xs);
}

.pc-app-bar--sticky {
	position: sticky;
	z-index: var(--pc-z-appbar, 72);
	inset-block-start: 0;
}

.pc-app-bar--fixed {
	position: fixed;
	z-index: var(--pc-z-appbar, 72);
	inset-block-start: 0;
	inset-inline: 0;
}

.pc-app-bar--elevation-1 {
	box-shadow: var(--pc-elevation-level-1);
}

.pc-app-bar--elevation-2 {
	box-shadow: var(--pc-elevation-level-2);
}

.pc-app-bar--elevation-3 {
	box-shadow: var(--pc-elevation-level-3);
}

.pc-app-bar__leading,
.pc-app-bar__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

.pc-app-bar__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: calc(1.375rem * var(--pc-font-scale, 1));
	line-height: calc(1.75rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-app-bar__support {
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-toolbar {
	display: flex;
	min-height: calc(var(--pc-density-control-large) + var(--pc-density-space-lg));
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
}

.pc-toolbar--dense {
	min-height: var(--pc-density-control-large);
	padding-block: var(--pc-density-space-xs);
}

.pc-toolbar--wrap {
	flex-wrap: wrap;
}

/* The scrim belongs to a modal drawer, so it covers the app bar too - unless the drawer is
   clipped under the app bar, when both start below it and the bar stays visible and usable. */
.pc-drawer-scrim {
	position: fixed;
	z-index: calc(var(--pc-z-drawer-modal, 78) - 1);
	inset: var(--pc-drawer-top, 0px) 0 0;
	background: rgb(0 0 0 / 0.48);
}

/* --pc-drawer-width (set by the Width parameter, or by a host on any ancestor) sizes every
   presentation; --pc-drawer-top offsets the fixed and sticky presentations from the viewport top. */
.pc-drawer {
	z-index: var(--pc-z-drawer, 70);
	display: flex;
	width: min(var(--pc-drawer-width, calc(22.5rem * var(--pc-font-scale, 1))), 90vw);
	height: 100%;
	flex-direction: column;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-low);
	border-radius: 0 var(--pc-shape-corner-large) var(--pc-shape-corner-large) 0;
}

.pc-drawer--end {
	border-radius: var(--pc-shape-corner-large) 0 0 var(--pc-shape-corner-large);
}

/* ClipUnderAppBar starts a docked drawer, or a fixed modal one, below the app bar. A responsive
   drawer's overlay presentation is a modal navigation drawer instead: it and its scrim cover the
   full height, app bar included, and its own close button dismisses it. So a responsive drawer
   takes the offset only while docked (each dock block below). */
.pc-drawer--clipped:not(.pc-drawer--responsive),
.pc-drawer-scrim--clipped:not(.pc-drawer-scrim--responsive) {
	--pc-drawer-top: var(--pc-app-bar-height);
}

.pc-drawer--modal {
	position: fixed;
	z-index: var(--pc-z-drawer-modal, 78);
	inset: var(--pc-drawer-top, 0px) auto 0 0;
	/* The inset sizes the fixed drawer: a height would override the bottom edge, so a drawer
	   clipped under the app bar would run past the viewport by the bar's height. */
	height: auto;
	border: var(--pc-overlay-border);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-drawer--docked {
	position: relative;
	width: var(--pc-drawer-width, calc(17.5rem * var(--pc-font-scale, 1)));
	flex: 0 0 auto;
	border-right: 1px solid var(--pc-color-outline-variant);
	border-radius: 0;
	box-shadow: none;
}

.pc-drawer--docked.pc-drawer--end {
	border-right: none;
	border-left: 1px solid var(--pc-color-outline-variant);
}

/* Collapsible docked drawers slide closed when Open is false, taking no space at all -
   any border (the library's or an app's) collapses with the width. */
.pc-drawer--docked.pc-drawer--collapsed {
	width: 0;
	overflow: hidden;
	opacity: 0;
	border-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.pc-drawer--docked {
		transition: width 200ms ease, opacity 160ms ease, border-width 200ms ease;
	}
}

/* Responsive drawer: the app-shell navigation pattern. Presentation is chosen by a media query
   rather than by measuring the window in script, so a server-rendered first paint is already
   correct - there is no flash of the wrong layout while the browser reports its width.

   Below the breakpoint it is the overlay: summoned, used, dismissed. At or above it, it is
   permanent chrome - always present, full height, and with no dismiss affordance, because there is
   nowhere to dismiss it to. Script is left with only one job: closing the overlay after a
   navigation. */
.pc-drawer--responsive {
	position: fixed;
	z-index: var(--pc-z-drawer-modal, 78);
	inset: var(--pc-drawer-top, 0px) auto 0 0;
	height: auto;
	border: var(--pc-overlay-border);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-drawer--modal.pc-drawer--end,
.pc-drawer--responsive.pc-drawer--end {
	inset: var(--pc-drawer-top, 0px) 0 0 auto;
}

.pc-drawer--responsive:not(.pc-drawer--open) {
	display: none;
}

/* Docked presentation of a responsive drawer. A media query cannot read a runtime value, so each
   breakpoint PlatformDrawer supports (PlatformDrawerBreakpoint, or its own 1100px default) has a
   block of its own; the blocks are otherwise identical. Docked, the drawer sticks at
   --pc-drawer-top and fills the rest of the viewport height. The dock classes only ever sit on a
   responsive drawer, so each rule keeps the single-class weight of the original docked rule and a
   host layout's own class (a height: 100% under an app bar, say) still overrides it. */
@media (min-width: 600px) {
	.pc-drawer--dock-small.pc-drawer--clipped {
		--pc-drawer-top: var(--pc-app-bar-height);
	}

	.pc-drawer--dock-small {
		width: min(var(--pc-drawer-width, calc(22.5rem * var(--pc-font-scale, 1))), 90vw);
		position: sticky;
		z-index: var(--pc-z-drawer, 70);
		top: var(--pc-drawer-top, 0px);
		height: calc(100vh - var(--pc-drawer-top, 0px));
		flex: 0 0 auto;
		border: none;
		border-inline-end: 1px solid var(--pc-color-outline-variant);
		border-radius: 0;
		box-shadow: none;
	}

	.pc-drawer--dock-small.pc-drawer--end {
		border-inline-end: none;
		border-inline-start: 1px solid var(--pc-color-outline-variant);
	}

	/* Docked, Open is the overlay's business - the sidebar shows regardless. Collapsed is the one
	   thing that hides it here, so the page can have the space back. */
	.pc-drawer--dock-small:not(.pc-drawer--open) {
		display: flex;
	}

	.pc-drawer--dock-small.pc-drawer--collapsed {
		display: none;
	}

	/* Nothing to dismiss when docked: the close button goes (only the header's own button - any
	   control in HeaderContent stays), and so does a header that held nothing else. */
	.pc-drawer--dock-small .pc-drawer__header > .pc-icon-button,
	.pc-drawer--dock-small .pc-drawer__header--bare,
	.pc-drawer-scrim--dock-small {
		display: none;
	}
}

@media (min-width: 960px) {
	.pc-drawer--dock-medium.pc-drawer--clipped {
		--pc-drawer-top: var(--pc-app-bar-height);
	}

	.pc-drawer--dock-medium {
		width: min(var(--pc-drawer-width, calc(22.5rem * var(--pc-font-scale, 1))), 90vw);
		position: sticky;
		z-index: var(--pc-z-drawer, 70);
		top: var(--pc-drawer-top, 0px);
		height: calc(100vh - var(--pc-drawer-top, 0px));
		flex: 0 0 auto;
		border: none;
		border-inline-end: 1px solid var(--pc-color-outline-variant);
		border-radius: 0;
		box-shadow: none;
	}

	.pc-drawer--dock-medium.pc-drawer--end {
		border-inline-end: none;
		border-inline-start: 1px solid var(--pc-color-outline-variant);
	}

	/* Docked, Open is the overlay's business - the sidebar shows regardless. Collapsed is the one
	   thing that hides it here, so the page can have the space back. */
	.pc-drawer--dock-medium:not(.pc-drawer--open) {
		display: flex;
	}

	.pc-drawer--dock-medium.pc-drawer--collapsed {
		display: none;
	}

	/* Nothing to dismiss when docked: the close button goes (only the header's own button - any
	   control in HeaderContent stays), and so does a header that held nothing else. */
	.pc-drawer--dock-medium .pc-drawer__header > .pc-icon-button,
	.pc-drawer--dock-medium .pc-drawer__header--bare,
	.pc-drawer-scrim--dock-medium {
		display: none;
	}
}

@media (min-width: 1100px) {
	.pc-drawer--dock-default.pc-drawer--clipped {
		--pc-drawer-top: var(--pc-app-bar-height);
	}

	/* Same width as the overlay. A docked navigation tree needs as much room for its labels as
	   the overlay gives it; the narrower docked default truncated them. */
	.pc-drawer--dock-default {
		width: min(var(--pc-drawer-width, calc(22.5rem * var(--pc-font-scale, 1))), 90vw);
		position: sticky;
		z-index: var(--pc-z-drawer, 70);
		top: var(--pc-drawer-top, 0px);
		height: calc(100vh - var(--pc-drawer-top, 0px));
		flex: 0 0 auto;
		border: none;
		border-inline-end: 1px solid var(--pc-color-outline-variant);
		border-radius: 0;
		box-shadow: none;
	}

	.pc-drawer--dock-default.pc-drawer--end {
		border-inline-end: none;
		border-inline-start: 1px solid var(--pc-color-outline-variant);
	}

	/* Docked, Open is the overlay's business - the sidebar shows regardless. Collapsed is the one
	   thing that hides it here, so the page can have the space back. */
	.pc-drawer--dock-default:not(.pc-drawer--open) {
		display: flex;
	}

	.pc-drawer--dock-default.pc-drawer--collapsed {
		display: none;
	}

	/* Nothing to dismiss when docked: the close button goes (only the header's own button - any
	   control in HeaderContent stays), and so does a header that held nothing else. */
	.pc-drawer--dock-default .pc-drawer__header > .pc-icon-button,
	.pc-drawer--dock-default .pc-drawer__header--bare,
	.pc-drawer-scrim--dock-default {
		display: none;
	}
}

@media (min-width: 1280px) {
	.pc-drawer--dock-large.pc-drawer--clipped {
		--pc-drawer-top: var(--pc-app-bar-height);
	}

	.pc-drawer--dock-large {
		width: min(var(--pc-drawer-width, calc(22.5rem * var(--pc-font-scale, 1))), 90vw);
		position: sticky;
		z-index: var(--pc-z-drawer, 70);
		top: var(--pc-drawer-top, 0px);
		height: calc(100vh - var(--pc-drawer-top, 0px));
		flex: 0 0 auto;
		border: none;
		border-inline-end: 1px solid var(--pc-color-outline-variant);
		border-radius: 0;
		box-shadow: none;
	}

	.pc-drawer--dock-large.pc-drawer--end {
		border-inline-end: none;
		border-inline-start: 1px solid var(--pc-color-outline-variant);
	}

	/* Docked, Open is the overlay's business - the sidebar shows regardless. Collapsed is the one
	   thing that hides it here, so the page can have the space back. */
	.pc-drawer--dock-large:not(.pc-drawer--open) {
		display: flex;
	}

	.pc-drawer--dock-large.pc-drawer--collapsed {
		display: none;
	}

	/* Nothing to dismiss when docked: the close button goes (only the header's own button - any
	   control in HeaderContent stays), and so does a header that held nothing else. */
	.pc-drawer--dock-large .pc-drawer__header > .pc-icon-button,
	.pc-drawer--dock-large .pc-drawer__header--bare,
	.pc-drawer-scrim--dock-large {
		display: none;
	}
}

/* The drawer's header and content follow the interface density, like the navigation items inside
   it. The content inset is deliberately slim - space-xs by space-sm, so 2px by 4px at Compact,
   4px by 8px at Standard and 6px by 12px at Comfortable - because the items carry their own inline
   padding, and the header's title starts where the item labels do (content inset plus item
   padding). */
.pc-drawer__header {
	display: flex;
	min-height: calc(var(--pc-density-control-large) + var(--pc-density-space-lg));
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-sm) var(--pc-density-space-sm) var(--pc-density-space-sm) calc(var(--pc-density-space-sm) + var(--pc-density-space-md));
}

.pc-drawer__title {
	font-size: calc(1.375rem * var(--pc-font-scale, 1));
	line-height: calc(1.75rem * var(--pc-font-scale, 1));
}

.pc-drawer__content {
	flex: 1 1 auto;
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm);
	overflow-y: auto;
}

.pc-nav-menu {
	--pc-nav-item-height: var(--pc-density-control-medium);
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-xs);
}

.pc-nav-menu--fill-container {
	height: 100%;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

/* Navigation items are a medium control tall (36px at Compact, 40px at Standard, 44px at
   Comfortable) with space-xs by space-md padding; the gap between items stays space-xs. On a touch
   screen (coarse pointer) every item, toggle and linked title keeps a 48px minimum target. */
.pc-nav-link,
.pc-nav-group__summary {
	display: flex;
	width: 100%;
	min-height: var(--pc-nav-item-height);
	align-items: center;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-xs) var(--pc-density-space-md);
	color: var(--pc-color-on-surface-variant);
	border-radius: var(--pc-nav-link-radius);
	font-family: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	text-decoration: none;
}

.pc-nav-link:hover,
.pc-nav-link:focus-visible,
.pc-nav-group__summary:hover,
.pc-nav-group__summary:focus-visible {
	background: var(--pc-color-surface-container-high);
	outline: 0;
}

.pc-nav-link--active {
	color: var(--pc-nav-link-active-color);
	background: var(--pc-nav-link-active-background);
	box-shadow: var(--pc-nav-link-active-shadow);
}

/* An unavailable destination: muted, with the not-allowed cursor as a non-colour cue, and no
   hover layer because there is nothing to activate. */
.pc-nav-link--disabled {
	cursor: not-allowed;
	opacity: 0.38;
}

.pc-nav-link--disabled:hover {
	background: transparent;
}

.pc-nav-link__badge {
	margin-left: auto;
	padding: calc(0.125rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-highest);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
}

.pc-nav-group {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-xs);
}

.pc-nav-group__summary {
	background: transparent;
	border: 0;
	text-align: start;
	cursor: pointer;
}

.pc-nav-group__label {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-nav-group__badge {
	flex: 0 0 auto;
	padding: calc(0.125rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-highest);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
}

/* Linked summary: the title is a NavLink, the chevron a separate toggle; hover per zone. */
.pc-nav-group__summary--linked {
	padding: 0;
	gap: 0;
	cursor: default;
}

.pc-nav-group__summary--linked:hover,
.pc-nav-group__summary--linked:focus-visible {
	background: transparent;
}

.pc-nav-group__title-link {
	display: flex;
	min-width: 0;
	min-height: var(--pc-nav-item-height);
	flex: 1 1 auto;
	align-items: center;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-xs) var(--pc-density-space-xs) var(--pc-density-space-xs) var(--pc-density-space-md);
	color: inherit;
	border-radius: var(--pc-nav-link-radius);
	text-decoration: none;
}

.pc-nav-group__title-link:hover,
.pc-nav-group__title-link:focus-visible {
	background: var(--pc-color-surface-container-high);
	outline: 0;
}

.pc-nav-group__title-link.pc-nav-link--active {
	color: var(--pc-nav-link-active-color);
	background: var(--pc-nav-link-active-background);
	box-shadow: var(--pc-nav-link-active-shadow);
}

.pc-nav-group__chevron-toggle {
	display: flex;
	min-height: var(--pc-nav-item-height);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0 var(--pc-density-space-md);
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--pc-nav-link-radius);
	cursor: pointer;
}

.pc-nav-group__chevron-toggle:hover,
.pc-nav-group__chevron-toggle:focus-visible {
	background: var(--pc-color-surface-container-high);
	outline: 0;
}

.pc-nav-group__chevron {
	flex: 0 0 auto;
	transition: transform 160ms ease;
}

.pc-nav-group--expanded > .pc-nav-group__summary .pc-nav-group__chevron {
	transform: rotate(180deg);
}

.pc-nav-group__children {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-xs);
	margin-inline-start: var(--pc-density-space-lg);
	padding-inline-start: var(--pc-density-space-sm);
	border-inline-start: 1px solid var(--pc-color-outline-variant);
}

.pc-nav-group__children[hidden] {
	display: none;
}

.pc-nav-group--disabled {
	opacity: 0.38;
}

.pc-nav-group--disabled > .pc-nav-group__summary {
	cursor: not-allowed;
}

@media (pointer: coarse) {
	.pc-nav-menu {
		--pc-nav-item-height: max(var(--pc-density-control-medium), 48px);
	}

	/* The linked group's chevron sits right beside its title link: 48px wide as well as tall, so a
	   tap meant for it never opens the page (at Compact it would otherwise be 8 + 24 + 8 = 40px). */
	.pc-nav-group__chevron-toggle {
		min-width: var(--pc-nav-item-height);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-nav-group__chevron {
		transition: none;
	}
}

.pc-menu {
	position: relative;
	display: inline-block;
}

.pc-menu > summary {
	display: flex;
	cursor: pointer;
	list-style: none;
}

.pc-menu > summary:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
	border-radius: var(--pc-button-radius);
}

.pc-menu > summary::-webkit-details-marker {
	display: none;
}

/* A custom activator is the consumer's own control; the wrapper only anchors the surface. */
.pc-menu__activator {
	display: inline-flex;
}

.pc-menu__dismiss-layer {
	position: fixed;
	z-index: calc(var(--pc-z-menu, 80) - 1);
	inset: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: default;
}

.pc-menu__surface {
	position: absolute;
	z-index: var(--pc-z-menu, 80);
	top: calc(100% + var(--pc-density-space-xs));
	right: auto;
	left: 0;
	display: flex;
	min-width: calc(13.75rem * var(--pc-font-scale, 1));
	flex-direction: column;
	padding-block: var(--pc-density-space-sm);
	color: var(--pc-color-on-surface);
	background: var(--pc-menu-background);
	border: var(--pc-menu-border);
	border-radius: var(--pc-menu-radius);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-menu__surface[hidden] {
	display: none;
}

.pc-menu-item {
	display: flex;
	width: 100%;
	min-height: var(--pc-density-control-large);
	align-items: center;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: inherit;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.pc-menu-item:hover,
.pc-menu-item:focus-visible {
	background: var(--pc-menu-item-hover);
	outline: 0;
}

.pc-menu-item > span {
	flex: 1 1 auto;
}

.pc-menu-item kbd {
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	font: inherit;
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-menu-item__supporting {
	display: block;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: 1.33;
}

/* A command that destroys or removes something: label and icon in the error colour (a disabled
   one keeps the disabled colour). */
.pc-menu-item--destructive:not(:disabled, [aria-disabled="true"]) {
	color: var(--pc-color-error);
}

.pc-menu__surface--dense .pc-menu-item {
	min-height: var(--pc-density-control-medium);
	padding-block: var(--pc-density-space-xs);
}

/* Submenus expand in place under their item, indented behind a guide line like nested
   navigation, so they never leave the surface. */
.pc-submenu {
	display: flex;
	flex-direction: column;
}

.pc-submenu__chevron {
	flex: 0 0 auto;
	transition: transform 160ms ease;
}

.pc-submenu--expanded > .pc-submenu__trigger .pc-submenu__chevron {
	transform: rotate(90deg);
}

.pc-submenu__items {
	display: flex;
	flex-direction: column;
	margin-inline-start: var(--pc-density-space-lg);
	border-inline-start: 1px solid var(--pc-color-outline-variant);
}

@media (prefers-reduced-motion: reduce) {
	.pc-submenu__chevron {
		transition: none;
	}
}

.pc-tabs__list {
	display: flex;
	min-height: calc(3rem * var(--pc-font-scale, 1));
	overflow-x: auto;
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

/* --pc-tabs-min-tab-width (host-owned, unset by default) widens every tab, for example to keep a
   row of short labels evenly sized. */
.pc-tabs__tab {
	position: relative;
	display: flex;
	min-width: var(--pc-tabs-min-tab-width, calc(5.625rem * var(--pc-font-scale, 1)));
	min-height: calc(3rem * var(--pc-font-scale, 1));
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 0;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	cursor: pointer;
}

.pc-tabs__tab::after {
	position: absolute;
	right: calc(1rem * var(--pc-font-scale, 1));
	bottom: 0;
	left: calc(1rem * var(--pc-font-scale, 1));
	height: 3px;
	content: "";
	background: transparent;
	border-radius: 3px 3px 0 0;
}

.pc-tabs__tab--active {
	color: var(--pc-color-primary);
}

.pc-tabs__tab--active::after {
	background: var(--pc-color-primary);
}

.pc-tabs__tab:focus-visible {
	background: var(--pc-color-surface-container);
	outline: 0;
}

.pc-tabs__panel {
	padding-block: calc(1rem * var(--pc-font-scale, 1));
}

.pc-tabs__panel[hidden] {
	display: none;
}

.pc-tabs__tab:disabled {
	color: var(--pc-color-on-surface-variant);
	cursor: not-allowed;
	opacity: 0.38;
}

.pc-tabs__custom-header {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-tabs__badge {
	padding: calc(0.125rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-highest);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
}

/* Actions share the strip with the tab list; the list alone scrolls when the tabs overflow. */
.pc-tabs__header {
	display: flex;
	min-width: 0;
	align-items: stretch;
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

.pc-tabs__header > .pc-tabs__list {
	min-width: 0;
	flex: 1 1 auto;
	border-bottom: 0;
}

.pc-tabs__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--pc-density-space-xs);
	padding-inline: var(--pc-density-space-sm);
}

/* Child combinators keep an aligned strip's layout out of a PlatformTabs nested in its panels. */
.pc-tabs--align-start > .pc-tabs__list > .pc-tabs__tab,
.pc-tabs--align-start > .pc-tabs__header > .pc-tabs__list > .pc-tabs__tab,
.pc-tabs--align-center > .pc-tabs__list > .pc-tabs__tab,
.pc-tabs--align-center > .pc-tabs__header > .pc-tabs__list > .pc-tabs__tab {
	flex: 0 0 auto;
}

.pc-tabs--align-center > .pc-tabs__list,
.pc-tabs--align-center > .pc-tabs__header > .pc-tabs__list {
	justify-content: center;
	/* safe keeps the first tab reachable when the strip overflows and scrolls. */
	justify-content: safe center;
}

/* Presentation: Rounded, Outlined and Elevation dress the strip (the tab list, or the header row
   when Actions share it) as a surface of its own; with Contained they dress the whole component
   instead, strip and panels together. --pc-tabs-corner-radius (host-owned, unset by default)
   replaces the card radius. Child combinators keep a strip's presentation out of a PlatformTabs
   nested in its panels. */
.pc-tabs--rounded:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--outlined:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--elevation-1:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--elevation-2:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--elevation-3:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--rounded:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--outlined:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--elevation-1:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--elevation-2:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--elevation-3:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--contained {
	background: var(--pc-color-surface);
}

.pc-tabs--rounded:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--rounded:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--rounded.pc-tabs--contained {
	border-radius: var(--pc-tabs-corner-radius, var(--pc-card-radius));
}

/* A contained strip follows the rounded top corners, so a focused end tab stays inside them. */
.pc-tabs--rounded.pc-tabs--contained > .pc-tabs__list,
.pc-tabs--rounded.pc-tabs--contained > .pc-tabs__header {
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
}

.pc-tabs--outlined:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--outlined:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--outlined.pc-tabs--contained {
	border: 1px solid var(--pc-color-outline-variant);
}

.pc-tabs--elevation-1:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--elevation-1:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--elevation-1.pc-tabs--contained {
	box-shadow: var(--pc-elevation-level-1);
}

.pc-tabs--elevation-2:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--elevation-2:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--elevation-2.pc-tabs--contained {
	box-shadow: var(--pc-elevation-level-2);
}

.pc-tabs--elevation-3:not(.pc-tabs--contained) > .pc-tabs__list,
.pc-tabs--elevation-3:not(.pc-tabs--contained) > .pc-tabs__header,
.pc-tabs--elevation-3.pc-tabs--contained {
	box-shadow: var(--pc-elevation-level-3);
}

/* A raised strip is set apart by its shadow; the divider would only trace its rounded bottom. */
.pc-tabs:is(.pc-tabs--elevation-1, .pc-tabs--elevation-2, .pc-tabs--elevation-3):not(.pc-tabs--contained, .pc-tabs--outlined) > :is(.pc-tabs__list, .pc-tabs__header) {
	border-bottom-color: transparent;
}

.pc-tabs--contained > .pc-tabs__panel {
	padding-inline: calc(1rem * var(--pc-font-scale, 1));
}

.pc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-breadcrumbs a {
	color: var(--pc-color-primary);
	text-decoration: none;
}

.pc-breadcrumbs a:hover {
	text-decoration: underline;
}

.pc-breadcrumbs li > :is(a, span) {
	display: inline-flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-breadcrumbs__icon {
	flex: none;
}

.pc-breadcrumbs__item--disabled {
	color: color-mix(in srgb, var(--pc-color-on-surface) 48%, transparent);
}

.pc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-pagination__page {
	display: grid;
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	border-radius: 50%;
	font: inherit;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	cursor: pointer;
}

.pc-pagination__page:hover,
.pc-pagination__page:focus-visible {
	background: var(--pc-color-surface-container-high);
	outline: 0;
}

.pc-pagination__page--active {
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
}

.pc-pagination__ellipsis {
	width: calc(1.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	text-align: center;
}

/* Dense: for narrow side panels. Targets use the density's small control size (at least
   1.875rem), well above the WCAG 2.5.8 minimum. */
.pc-pagination--dense {
	gap: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-pagination--dense .pc-pagination__page,
.pc-pagination--dense .pc-pagination__step {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
}

.pc-pagination--dense .pc-pagination__page {
	font-size: calc(0.8125rem * var(--pc-font-scale, 1));
}

.pc-pagination--dense .pc-pagination__step {
	padding: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-pagination--dense .pc-pagination__ellipsis {
	width: calc(1rem * var(--pc-font-scale, 1));
}

.pc-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pc-scheduler {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-md);
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
}

.pc-scheduler,
.pc-scheduler *,
.pc-scheduler *::before,
.pc-scheduler *::after {
	box-sizing: border-box;
}

.pc-scheduler--fill-container {
	width: 100%;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
}

.pc-scheduler__title-row {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-lg) var(--pc-density-space-lg) 0;
}

.pc-scheduler__title-row h2 {
	margin: 0;
}

.pc-scheduler__header-actions,
.pc-scheduler__filters,
.pc-scheduler__legend {
	min-width: 0;
}

.pc-scheduler__toolbar {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding-inline: var(--pc-density-space-lg);
}

.pc-scheduler__toolbar-spacer {
	flex: 1 1 2rem;
}

.pc-scheduler__date-filter {
	width: min(14rem, 100%);
	margin: 0;
}

.pc-scheduler__date-filter > .pc-field__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pc-scheduler__legend {
	padding-inline: var(--pc-density-space-lg);
	color: var(--pc-color-on-surface-variant);
}

.pc-scheduler__viewport {
	position: relative;
	min-width: 0;
	min-height: calc(14rem * var(--pc-font-scale, 1));
	flex: 1 1 auto;
	overflow: auto;
	border-block-start: 1px solid var(--pc-color-outline-variant);
	outline: none;
	overscroll-behavior: contain;
}

.pc-scheduler__viewport:focus-visible {
	box-shadow: inset 0 0 0 3px var(--pc-color-primary);
}

.pc-scheduler__header,
.pc-scheduler__row {
	display: grid;
	width: max-content;
	min-width: 100%;
	grid-template-columns: var(--pc-scheduler-resource-width) repeat(var(--pc-scheduler-slot-count), var(--pc-scheduler-slot-width));
}

.pc-scheduler__header {
	position: sticky;
	z-index: 5;
	top: 0;
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container);
}

.pc-scheduler__header--dates {
	min-height: calc(2.5rem * var(--pc-font-scale, 1));
}

.pc-scheduler__header--times {
	z-index: 4;
	top: calc(2.5rem * var(--pc-font-scale, 1));
	min-height: calc(2rem * var(--pc-font-scale, 1));
	border-block-end: 1px solid var(--pc-color-outline);
}

.pc-scheduler__resource-header,
.pc-scheduler__resource-cell {
	position: sticky;
	z-index: 3;
	left: 0;
	display: flex;
	min-width: 0;
	align-items: center;
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	overflow: hidden;
	background: var(--pc-color-surface-container);
	border-inline-end: 1px solid var(--pc-color-outline);
	font-weight: 600;
	text-overflow: ellipsis;
}

.pc-scheduler__resource-header {
	z-index: 7;
	grid-column: 1;
}

.pc-scheduler__resource-header--continuation {
	min-height: calc(2rem * var(--pc-font-scale, 1));
}

.pc-scheduler__day-header,
.pc-scheduler__time-header {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: center;
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm);
	border-inline-end: 1px solid var(--pc-color-outline-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

.pc-scheduler__day-header {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-scheduler__rows {
	width: max-content;
	min-width: 100%;
}

.pc-scheduler__row {
	position: relative;
	min-height: calc(var(--pc-scheduler-row-min-height) * var(--pc-font-scale, 1));
	background: var(--pc-color-surface);
	border-block-end: 1px solid var(--pc-color-outline-variant);
}

.pc-scheduler__resource-cell {
	z-index: 3;
	background: var(--pc-color-surface);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-scheduler__slot {
	grid-row: 1;
	min-width: 0;
	min-height: calc(var(--pc-scheduler-row-min-height) * var(--pc-font-scale, 1));
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-inline-end: 1px solid var(--pc-color-outline-variant);
	border-radius: 0;
}

.pc-scheduler__slot--interactive {
	cursor: pointer;
}

.pc-scheduler__slot--interactive:hover {
	background: color-mix(in srgb, var(--pc-color-primary) 8%, transparent);
}

.pc-scheduler__slot--interactive:focus-visible {
	z-index: 2;
	outline: 3px solid var(--pc-color-primary);
	outline-offset: -3px;
}

.pc-scheduler__event-layer {
	position: relative;
	z-index: 2;
	grid-row: 1;
	grid-column: 2 / -1;
	min-width: 0;
	pointer-events: none;
}

.pc-scheduler__event {
	position: absolute;
	display: flex;
	min-width: calc(1.5rem * var(--pc-font-scale, 1));
	align-items: center;
	margin: 0;
	padding: calc(0.25rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	overflow: hidden;
	color: var(--pc-color-on-primary-container);
	background: var(--pc-component-container);
	border: 2px solid var(--pc-color-surface);
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
	line-height: 1.15;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: auto;
}

.pc-scheduler__event.pc-color--secondary { color: var(--pc-color-on-secondary-container); }
.pc-scheduler__event.pc-color--tertiary { color: var(--pc-color-on-tertiary-container); }
.pc-scheduler__event.pc-color--info { color: var(--pc-color-on-info-container); }
.pc-scheduler__event.pc-color--success { color: var(--pc-color-on-success-container); }
.pc-scheduler__event.pc-color--warning { color: var(--pc-color-on-warning-container); }
.pc-scheduler__event.pc-color--error { color: var(--pc-color-on-error-container); }
.pc-scheduler__event.pc-color--neutral { color: var(--pc-color-on-surface); }

.pc-scheduler__event > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-scheduler__event:focus-visible {
	z-index: 4;
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 1px;
}

/* Validated caller colours: the text colour is supplied or chosen by the component for contrast.
   A translucent colour whose best text colour depends on the theme keeps the on-surface text. */
.pc-scheduler__event.pc-scheduler__event--custom-color {
	color: var(--pc-scheduler-event-text-color, var(--pc-color-on-surface));
	background: var(--pc-scheduler-event-color);
}

.pc-scheduler__event.pc-scheduler__event--custom-text {
	color: var(--pc-scheduler-event-text-color);
}

/* Background events (leave, availability) sit behind other events in document order. */
.pc-scheduler__event.pc-scheduler__event--background {
	border-style: dashed;
	background-image: repeating-linear-gradient(
		135deg,
		color-mix(in srgb, currentColor 10%, transparent) 0 0.25rem,
		transparent 0.25rem 0.5rem);
}

.pc-scheduler__unavailable {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	min-width: 0;
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	background: repeating-linear-gradient(
		135deg,
		color-mix(in srgb, var(--pc-color-on-surface) 10%, transparent) 0 0.375rem,
		transparent 0.375rem 0.75rem);
	border-inline: 1px solid var(--pc-color-outline-variant);
	pointer-events: none;
}

.pc-scheduler__unavailable-label {
	overflow: hidden;
	padding: 0 calc(0.375rem * var(--pc-font-scale, 1));
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-scheduler__slot--unavailable {
	cursor: not-allowed;
}

.pc-menu.pc-scheduler__conflict {
	position: absolute;
	z-index: 3;
	top: 0;
	display: block;
	height: 100%;
	min-width: calc(1.5rem * var(--pc-font-scale, 1));
	pointer-events: auto;
}

.pc-scheduler__conflict > summary {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--pc-color-on-error-container);
	background: var(--pc-color-error-container);
	border: 2px solid var(--pc-color-error);
	border-radius: var(--pc-shape-corner-small);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
	white-space: nowrap;
}

.pc-scheduler__conflict-label {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding-inline: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-scheduler__conflict-panel {
	display: flex;
	max-width: min(calc(24rem * var(--pc-font-scale, 1)), calc(100vw - 2rem));
	flex-direction: column;
	gap: var(--pc-density-space-xs);
	padding-inline: var(--pc-density-space-sm);
}

.pc-scheduler__conflict-header,
.pc-scheduler__conflict-hint {
	margin: 0;
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-scheduler__conflict-header {
	font-weight: 600;
}

.pc-scheduler__conflict-list {
	display: flex;
	margin: 0;
	padding: 0;
	flex-direction: column;
	list-style: none;
}

.pc-scheduler__conflict-item {
	display: flex;
	width: 100%;
	min-height: calc(2.75rem * var(--pc-font-scale, 1));
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm);
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	text-align: start;
}

button.pc-scheduler__conflict-item {
	cursor: pointer;
}

button.pc-scheduler__conflict-item:hover {
	background: color-mix(in srgb, var(--pc-color-on-surface) 8%, transparent);
}

button.pc-scheduler__conflict-item:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: -3px;
}

.pc-scheduler__conflict-title {
	font-weight: 600;
}

.pc-scheduler__conflict-time {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

/* Day groups (GroupEventsByDay): one chip per resource and date. The inline style carries the
   date's edges (--pc-scheduler-day-left/right) and the group's span as percentages of the
   timeline. The chip is at least 4.75rem wide so its count always reads, shifts left near the
   end of its date, and never leaves the date (a small inset keeps neighbouring dates apart). */
.pc-scheduler__day-group {
	--pc-scheduler-day-group-inset: calc(0.1875rem * var(--pc-font-scale, 1));
	--pc-scheduler-day-group-size: min(
		calc(var(--pc-scheduler-day-right) - var(--pc-scheduler-day-left) - (2 * var(--pc-scheduler-day-group-inset))),
		max(var(--pc-scheduler-day-group-width), calc(4.75rem * var(--pc-font-scale, 1))));
	position: absolute;
	z-index: 3;
	top: calc(0.375rem * var(--pc-font-scale, 1));
	bottom: calc(0.375rem * var(--pc-font-scale, 1));
	left: max(
		calc(var(--pc-scheduler-day-left) + var(--pc-scheduler-day-group-inset)),
		min(
			var(--pc-scheduler-day-group-left),
			calc(var(--pc-scheduler-day-right) - var(--pc-scheduler-day-group-inset) - var(--pc-scheduler-day-group-size))));
	width: var(--pc-scheduler-day-group-size);
	pointer-events: auto;
}

.pc-menu.pc-scheduler__day-group {
	display: block;
}

.pc-scheduler__day-group:focus-visible,
.pc-scheduler__day-group:focus-within {
	z-index: 4;
}

.pc-scheduler__day-group--single,
.pc-scheduler__day-group > summary {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 calc(0.375rem * var(--pc-font-scale, 1)) calc(0.25rem * var(--pc-font-scale, 1));
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-highest);
	border: 2px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}

.pc-scheduler__day-group > summary {
	position: relative;
	width: 100%;
	height: 100%;
}

button.pc-scheduler__day-group--single {
	cursor: pointer;
}

button.pc-scheduler__day-group--single:hover,
.pc-scheduler__day-group > summary:hover {
	background: color-mix(in srgb, var(--pc-color-on-surface) 8%, var(--pc-color-surface-container-highest));
}

.pc-scheduler__day-group--single:focus-visible,
.pc-scheduler__day-group > summary:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 1px;
	border-radius: var(--pc-shape-corner-small);
}

.pc-scheduler__day-group.pc-menu--open > summary {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-scheduler__day-group--overlap > summary {
	border-color: var(--pc-color-error);
}

.pc-scheduler__day-group--overlap .pc-scheduler__day-group-label .pc-icon {
	color: var(--pc-color-error);
}

.pc-scheduler__day-group-label {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	overflow: hidden;
}

.pc-scheduler__day-group-label .pc-icon {
	flex: 0 0 auto;
}

.pc-scheduler__day-group-label > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The status strip: one segment per event colour, as wide as its share of the day's events. */
.pc-scheduler__day-group-strip {
	position: absolute;
	right: calc(0.25rem * var(--pc-font-scale, 1));
	bottom: calc(0.1875rem * var(--pc-font-scale, 1));
	left: calc(0.25rem * var(--pc-font-scale, 1));
	display: flex;
	height: calc(0.25rem * var(--pc-font-scale, 1));
	gap: 1px;
	overflow: hidden;
	border-radius: calc(0.125rem * var(--pc-font-scale, 1));
	pointer-events: none;
}

.pc-scheduler__day-group-strip > span {
	min-width: 0;
	flex: 1 1 0;
	background: var(--pc-scheduler-stripe-color, var(--pc-component-color, var(--pc-color-primary)));
}

.pc-scheduler__day-list-header {
	display: flex;
	flex-direction: column;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm) var(--pc-density-space-sm);
	border-block-end: 1px solid var(--pc-color-outline-variant);
}

.pc-scheduler__day-list-date,
.pc-scheduler__day-list-summary,
.pc-scheduler__day-list-overlap {
	margin: 0;
}

.pc-scheduler__day-list-date {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
}

.pc-scheduler__day-list-summary {
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 600;
}

.pc-scheduler__day-list-overlap {
	display: flex;
	align-items: center;
	gap: calc(0.375rem * var(--pc-font-scale, 1));
	color: var(--pc-color-error);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

/* A busy day scrolls its rows; the header and the hint stay put. */
.pc-scheduler__day-list-items {
	max-height: min(calc(23.25rem * var(--pc-font-scale, 1)), 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pc-scheduler__day-list > .pc-scheduler__conflict-hint {
	border-block-start: 1px solid var(--pc-color-outline-variant);
}

/* Positioned by the browser helper (top layer or fixed); this is the no-script fallback. */
.pc-scheduler__tooltip {
	position: absolute;
	z-index: var(--pc-z-tooltip, 85);
	top: 0;
	left: 0;
	max-width: min(calc(22rem * var(--pc-font-scale, 1)), calc(100vw - 2rem));
	margin: 0;
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	overflow: visible;
	color: var(--pc-color-on-tooltip-container);
	background: var(--pc-color-tooltip-container);
	border: 0;
	border-radius: var(--pc-shape-corner-medium);
	box-shadow: var(--pc-elevation-level-2);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: 1.35;
}

.pc-scheduler__tooltip[hidden] {
	display: none;
}

.pc-scheduler__empty {
	position: sticky;
	left: 0;
	width: min(100vw, 40rem);
	padding: var(--pc-density-space-xl);
	color: var(--pc-color-on-surface-variant);
	text-align: center;
}

.pc-scheduler__loading {
	position: absolute;
	z-index: 9;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: color-mix(in srgb, var(--pc-color-surface) 84%, transparent);
	backdrop-filter: blur(2px);
}

.pc-kanban {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: calc(20rem * var(--pc-font-scale, 1));
	flex-direction: column;
	gap: var(--pc-density-space-md);
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
}

.pc-kanban,
.pc-kanban *,
.pc-kanban *::before,
.pc-kanban *::after {
	box-sizing: border-box;
}

.pc-kanban--fill-container {
	width: 100%;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
}

/* Layout decisions use the board's own width, so it also adapts inside narrow panels. */
.pc-kanban {
	container-type: inline-size;
}

.pc-kanban--disabled {
	opacity: 0.72;
}

.pc-kanban__title-row {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-density-space-lg);
	padding: var(--pc-density-space-lg) var(--pc-density-space-lg) 0;
}

.pc-kanban__title-row > div:first-child {
	min-width: 0;
}

.pc-kanban__title-row h2,
.pc-kanban__title-row p {
	margin: 0;
}

.pc-kanban__title-row p {
	margin-block-start: var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
}

.pc-kanban__header-actions,
.pc-kanban__toolbar {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-kanban__header-actions {
	justify-content: flex-end;
}

.pc-kanban__toolbar {
	padding-inline: var(--pc-density-space-lg);
}

/*
 * Narrow header: the title and supporting text take the full width, header actions share
 * one row beneath them, and toolbar controls stack at full width.
 */
@container (max-width: 599px) {
	.pc-kanban__title-row {
		flex-wrap: wrap;
		gap: var(--pc-density-space-sm) var(--pc-density-space-md);
		padding: var(--pc-density-space-md) var(--pc-density-space-md) 0;
	}

	.pc-kanban__title-row > div:first-child {
		flex: 1 1 100%;
	}

	.pc-kanban__title-row h2 {
		font-size: calc(1.375rem * var(--pc-font-scale, 1));
		line-height: calc(1.75rem * var(--pc-font-scale, 1));
	}

	.pc-kanban__header-actions {
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.pc-kanban__toolbar {
		padding-inline: var(--pc-density-space-md);
	}

	.pc-kanban__toolbar > * {
		flex: 1 1 100%;
	}
}

.pc-kanban__board {
	--pc-scrollbar-inset: var(--pc-shape-corner-large);
	display: grid;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	grid-auto-columns: minmax(
		min(calc(18rem * var(--pc-font-scale, 1)), 82vi),
		1fr);
	grid-auto-flow: column;
	grid-template-rows: minmax(0, 1fr);
	gap: var(--pc-density-space-md);
	padding: 0 var(--pc-density-space-lg) var(--pc-density-space-lg);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: var(--pc-density-space-lg);
	scroll-snap-type: inline proximity;
	/* No reserved vertical gutter: the board only scrolls sideways, and a reserved gutter
	   would end the horizontal scrollbar short on the right. */
	scrollbar-gutter: auto;
}

.pc-kanban__column {
	--pc-kanban-column-accent: var(--pc-component-color);
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 0;
	max-height: calc(42rem * var(--pc-font-scale, 1));
	flex-direction: column;
	overflow: hidden;
	background: var(--pc-kanban-column-background);
	border: var(--pc-kanban-column-border);
	border-radius: var(--pc-kanban-column-radius);
	scroll-snap-align: start;
	transition:
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		border-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-kanban--fill-container .pc-kanban__column {
	height: 100%;
	max-height: none;
}

.pc-kanban__column--closed .pc-kanban__column-accent {
	background:
		repeating-linear-gradient(
			135deg,
			var(--pc-kanban-column-accent) 0,
			var(--pc-kanban-column-accent) 3px,
			transparent 3px,
			transparent 6px);
}

.pc-kanban__column--drop-allowed,
.pc-kanban__column--pointer-allowed {
	border-color: color-mix(
		in srgb,
		var(--pc-kanban-column-accent) 55%,
		var(--pc-color-outline-variant));
}

.pc-kanban__column--drop-blocked,
.pc-kanban__column--pointer-blocked {
	background:
		color-mix(in srgb, var(--pc-color-surface-container-low) 84%, var(--pc-color-error-container));
}

.pc-kanban__column--drop-target,
.pc-kanban__column--pointer-target {
	background:
		color-mix(in srgb, var(--pc-kanban-column-accent) 10%, var(--pc-kanban-column-background));
	border-color: var(--pc-kanban-column-accent);
	box-shadow:
		inset 0 0 0 2px var(--pc-kanban-column-accent),
		var(--pc-elevation-level-1);
}

.pc-kanban__column--pointer-target-blocked {
	border-color: var(--pc-color-error);
	box-shadow: inset 0 0 0 2px var(--pc-color-error);
}

.pc-kanban__column-header {
	display: grid;
	min-width: 0;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-md);
	border-block-end: 1px solid var(--pc-color-outline-variant);
}

.pc-kanban__column-accent {
	width: calc(0.625rem * var(--pc-font-scale, 1));
	height: calc(0.625rem * var(--pc-font-scale, 1));
	margin-block-start: calc(0.375rem * var(--pc-font-scale, 1));
	background: var(--pc-kanban-column-accent);
	border-radius: var(--pc-shape-corner-full);
}

.pc-kanban__column-heading {
	min-width: 0;
}

.pc-kanban__column-heading h3,
.pc-kanban__column-heading p {
	margin: 0;
}

.pc-kanban__column-heading h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-kanban__column-heading p {
	margin-block-start: var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
}

.pc-kanban__column-header-content {
	margin-block-start: var(--pc-density-space-xs);
}

.pc-kanban__column-trailing {
	display: flex;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

.pc-kanban__column-toggle {
	display: none;
}

.pc-kanban__column-count {
	display: inline-grid;
	min-width: calc(1.75rem * var(--pc-font-scale, 1));
	min-height: calc(1.75rem * var(--pc-font-scale, 1));
	place-items: center;
	padding-inline: var(--pc-density-space-sm);
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pc-kanban__items {
	--pc-scrollbar-inset: var(--pc-kanban-column-radius);
	display: flex;
	min-width: 0;
	min-height: calc(8rem * var(--pc-font-scale, 1));
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-sm);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.pc-kanban__item {
	min-width: 0;
}

.pc-kanban__card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-kanban-card-background);
	border: var(--pc-kanban-card-border);
	border-inline-start: calc(0.25rem * var(--pc-font-scale, 1)) solid var(--pc-kanban-column-accent);
	border-radius: var(--pc-kanban-card-radius);
	box-shadow: var(--pc-kanban-card-shadow);
	outline: 0;
	transition:
		background-color var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		transform var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-kanban__card--movable {
	cursor: grab;
}

.pc-kanban__card--movable:active {
	cursor: grabbing;
}

.pc-kanban__card--interactive {
	cursor: pointer;
}

.pc-kanban__card--interactive:hover {
	background:
		color-mix(in srgb, var(--pc-color-primary) 5%, var(--pc-kanban-card-background));
	box-shadow: var(--pc-elevation-level-2);
}

.pc-kanban__card--interactive:focus-visible,
.pc-kanban__drag-handle:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-kanban__card--read-only {
	border-inline-start-color: var(--pc-color-outline);
	box-shadow: none;
	-webkit-user-select: none;
	user-select: none;
}

.pc-kanban__card--dragging,
.pc-kanban__card--pointer-dragging,
.pc-kanban__card--native-dragging {
	opacity: 0.36;
}

.pc-kanban__card--moving {
	opacity: 0.6;
	pointer-events: none;
}

.pc-kanban__card-controls {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--pc-density-space-xs);
	padding: var(--pc-density-space-xs) var(--pc-density-space-xs) 0;
}

.pc-kanban__card-controls-spacer {
	flex: 1 1 auto;
}

.pc-kanban__drag-handle {
	display: inline-grid;
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
	place-items: center;
	padding: 0;
	touch-action: none;
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 0;
	border-radius: var(--pc-icon-button-radius);
	cursor: grab;
	-webkit-tap-highlight-color: transparent;
}

.pc-kanban__drag-handle:hover {
	color: var(--pc-color-primary);
	background: var(--pc-color-surface-container-high);
}

.pc-kanban__drag-handle:active {
	cursor: grabbing;
}

.pc-kanban__open-button {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
}

.pc-kanban__read-only {
	padding: calc(0.125rem * var(--pc-font-scale, 1)) var(--pc-density-space-sm);
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 600;
	line-height: calc(1.125rem * var(--pc-font-scale, 1));
}

.pc-kanban__card-content {
	min-width: 0;
	padding: var(--pc-density-space-xs) var(--pc-density-space-md) var(--pc-density-space-md);
	overflow-wrap: anywhere;
}

/* The card context menu opens at the pointer in the top layer, clear of column clipping. */
.pc-kanban__context-menu {
	position: fixed;
	z-index: calc(var(--pc-z-popover, 95) + 2);
	inset: auto;
	top: 0;
	left: 0;
	margin: 0;
	max-width: min(calc(20rem * var(--pc-font-scale, 1)), calc(100vw - 1rem));
	max-height: calc(100vh - 1rem);
	overflow-y: auto;
}

.pc-kanban__context-dismiss {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

.pc-kanban__context-heading {
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg) var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-kanban__context-separator {
	margin-block: var(--pc-density-space-xs);
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-kanban__context-option {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.pc-kanban__context-option small {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	white-space: normal;
}

.pc-menu-item:disabled,
.pc-menu-item[aria-disabled="true"] {
	color: var(--pc-color-on-surface-variant);
	cursor: not-allowed;
}

/*
 * List presentation: states become stacked, collapsible sections with full-width cards.
 * Auto applies it on narrow boards; List applies it everywhere.
 */
.pc-kanban--list .pc-kanban__board {
	display: flex;
	flex-direction: column;
	padding-inline: var(--pc-density-space-md);
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: none;
}

.pc-kanban--list .pc-kanban__column {
	height: auto;
	max-height: none;
	flex: 0 0 auto;
	overflow: visible;
}

.pc-kanban--list .pc-kanban__items {
	min-height: 0;
	overflow: visible;
	scrollbar-gutter: auto;
}

.pc-kanban--list .pc-kanban__column-toggle {
	display: inline-grid;
}

.pc-kanban--list .pc-kanban__column--collapsed .pc-kanban__items {
	display: none;
}

.pc-kanban--list .pc-kanban__column--collapsed .pc-kanban__column-header {
	border-block-end: 0;
}

@container (max-width: 599px) {
	.pc-kanban--auto .pc-kanban__board {
		display: flex;
		flex-direction: column;
		padding-inline: var(--pc-density-space-md);
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: none;
	}

	.pc-kanban--auto .pc-kanban__column {
		height: auto;
		max-height: none;
		flex: 0 0 auto;
		overflow: visible;
	}

	.pc-kanban--auto .pc-kanban__items {
		min-height: 0;
		overflow: visible;
		scrollbar-gutter: auto;
	}

	.pc-kanban--auto .pc-kanban__column-toggle {
		display: inline-grid;
	}

	.pc-kanban--auto .pc-kanban__column--collapsed .pc-kanban__items {
		display: none;
	}

	.pc-kanban--auto .pc-kanban__column--collapsed .pc-kanban__column-header {
		border-block-end: 0;
	}
}

.pc-kanban__card-menu {
	position: absolute;
	right: var(--pc-density-space-xs);
	bottom: var(--pc-density-space-xs);
}

.pc-kanban__card-menu .pc-icon-button {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
	color: var(--pc-color-on-surface-variant);
}

/* Without the controls row the content takes the card's full padding. */
.pc-kanban__card-content--full {
	padding-top: var(--pc-density-space-md);
}

.pc-kanban__card[data-kanban-keyboard-move]:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-kanban__card[data-kanban-touch-hold] {
	-webkit-touch-callout: none;
}

.pc-kanban__empty,
.pc-kanban__no-columns {
	display: grid;
	min-width: 0;
	min-height: calc(7rem * var(--pc-font-scale, 1));
	place-items: center;
	padding: var(--pc-density-space-lg);
	color: var(--pc-color-on-surface-variant);
	border: 2px dashed var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: center;
}

.pc-kanban__no-columns {
	margin: 0 var(--pc-density-space-lg) var(--pc-density-space-lg);
}

.pc-kanban__loading {
	position: absolute;
	z-index: 9;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: color-mix(in srgb, var(--pc-color-surface) 84%, transparent);
	backdrop-filter: blur(2px);
}

/* The drag preview follows the pointer above every other layer. */
.pc-kanban__drag-preview {
	position: fixed;
	z-index: calc(var(--pc-z-snackbar, 100) + 1);
	top: 0;
	left: 0;
	max-height: min(60vh, calc(24rem * var(--pc-font-scale, 1)));
	overflow: hidden;
	opacity: 1;
	box-shadow: var(--pc-elevation-level-3);
	pointer-events: none;
	will-change: transform;
}

.pc-kanban--pointer-dragging,
.pc-kanban--pointer-dragging *,
.pc-kanban--native-dragging,
.pc-kanban--native-dragging * {
	user-select: none;
}

.pc-markdown {
	min-width: 0;
	color: var(--pc-color-on-surface);
	font-size: calc(1rem * var(--pc-font-scale, 1));
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.pc-markdown > :first-child {
	margin-block-start: 0;
}

.pc-markdown > :last-child {
	margin-block-end: 0;
}

/*
 * Rendered markdown mirrors the platform type scale and surface treatment so
 * previews look like real platform components under every design-language
 * adapter (heading emphasis, shape and colour tokens all flow through).
 */
.pc-markdown h1,
.pc-markdown h2,
.pc-markdown h3,
.pc-markdown h4,
.pc-markdown h5,
.pc-markdown h6 {
	margin-block: 1.4em 0.5em;
	color: var(--pc-color-on-surface);
}

.pc-markdown h1 {
	font-size: calc(2rem * var(--pc-font-scale, 1));
	line-height: calc(2.5rem * var(--pc-font-scale, 1));
	font-weight: var(--pc-typescale-heading-weight);
	letter-spacing: var(--pc-typescale-heading-letter-spacing);
}

.pc-markdown h2 {
	font-size: calc(1.75rem * var(--pc-font-scale, 1));
	line-height: calc(2.25rem * var(--pc-font-scale, 1));
	font-weight: var(--pc-typescale-heading-weight);
	letter-spacing: var(--pc-typescale-heading-letter-spacing);
}

.pc-markdown h3 {
	font-size: calc(1.5rem * var(--pc-font-scale, 1));
	line-height: calc(2rem * var(--pc-font-scale, 1));
	font-weight: var(--pc-typescale-heading-weight);
	letter-spacing: var(--pc-typescale-heading-letter-spacing);
}

.pc-markdown h4 {
	font-size: calc(1.375rem * var(--pc-font-scale, 1));
	line-height: calc(1.75rem * var(--pc-font-scale, 1));
	font-weight: var(--pc-typescale-heading-weight);
	letter-spacing: var(--pc-typescale-heading-letter-spacing);
}

.pc-markdown h5 {
	font-size: calc(1rem * var(--pc-font-scale, 1));
	line-height: calc(1.5rem * var(--pc-font-scale, 1));
	font-weight: 500;
	letter-spacing: calc(0.009375rem * var(--pc-font-scale, 1));
}

.pc-markdown h6 {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	font-weight: 500;
	letter-spacing: calc(0.00625rem * var(--pc-font-scale, 1));
}

.pc-markdown a {
	color: var(--pc-color-primary);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

.pc-markdown a:focus-visible {
	border-radius: var(--pc-shape-corner-extra-small);
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-markdown blockquote {
	margin-inline: 0;
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-low);
	border-inline-start: calc(0.25rem * var(--pc-font-scale, 1)) solid var(--pc-color-primary);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-markdown code {
	padding: 0.1em 0.3em;
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-extra-small);
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

.pc-markdown pre {
	max-width: 100%;
	padding: var(--pc-density-space-lg);
	overflow: auto;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-markdown pre code {
	padding: 0;
	background: transparent;
}

.pc-markdown table {
	display: block;
	width: fit-content;
	max-width: 100%;
	overflow: auto;
	border-spacing: 0;
	border-collapse: separate;
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-markdown th,
.pc-markdown td {
	/*
	 * Full grid lines, not just row dividers: the same treatment renders the
	 * markdown preview and the HTML visual editor, where an empty column or
	 * row is otherwise invisible while authoring. Inline-start edges are
	 * suppressed on the first column so the rounded outer border stays clean.
	 */
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	border: 0;
	border-block-end: 1px solid var(--pc-color-outline-variant);
	border-inline-start: 1px solid var(--pc-color-outline-variant);
	text-align: start;
}

.pc-markdown th:first-child,
.pc-markdown td:first-child {
	border-inline-start: 0;
}

/*
 * The tint marks a header *row*, so it applies only to a row made entirely of
 * header cells. A th sitting beside data cells is a row header - the label
 * column of an email table - and needs no colour of its own.
 *
 * Author colours still win either way: email markup states its own through
 * bgcolor or an inline background, and the tint is only a default for markup
 * that brings none.
 */
.pc-markdown tr:not(:has(td)) > th:not([bgcolor]):not([style*="background"]) {
	background: var(--pc-color-surface-container);
}

/* :not([bgcolor]) here only to outrank the tinted rule above, which carries it. */
.pc-markdown tr[bgcolor]:not(:has(td)) > th:not([bgcolor]),
.pc-markdown tr[style*="background"]:not(:has(td)) > th:not([bgcolor]) {
	background-color: transparent;
}

.pc-markdown tbody tr:last-child td {
	border-block-end: 0;
}

/*
 * Authoring affordance: cells keep a visible minimum footprint inside the
 * visual editor so freshly added empty rows and columns can be seen and
 * clicked. Only the editing surface gets this - rendered previews show
 * content at its natural size.
 */
.pc-template-editor__visual th,
.pc-template-editor__visual td {
	min-width: calc(2.5rem * var(--pc-font-scale, 1));
	min-height: calc(1.75rem * var(--pc-font-scale, 1));
}

.pc-markdown hr {
	height: 1px;
	margin-block: var(--pc-density-space-lg);
	border: 0;
	background: var(--pc-color-outline-variant);
}

.pc-markdown img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pc-shape-corner-small);
}

/*
 * Task-list items: Markdig emits native checkboxes, which are restyled to
 * mirror .pc-checkbox__control exactly (size, border, radius and checked
 * colours). The checkbox replaces the list marker.
 */
.pc-markdown li:has(> input[type="checkbox"]) {
	list-style: none;
}

.pc-markdown li > input[type="checkbox"] {
	width: calc(1.125rem * var(--pc-font-scale, 1));
	height: calc(1.125rem * var(--pc-font-scale, 1));
	margin-block: 0;
	margin-inline: -1.45em 0.4em;
	appearance: none;
	position: relative;
	vertical-align: text-bottom;
	background: transparent;
	border: 2px solid var(--pc-color-on-surface-variant);
	border-radius: 2px;
}

.pc-markdown li > input[type="checkbox"]:checked {
	background: var(--pc-color-primary);
	border-color: var(--pc-color-primary);
}

.pc-markdown li > input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 12%;
	background: var(--pc-color-on-primary);
	clip-path: polygon(38% 78%, 92% 15%, 100% 25%, 38% 96%, 0 56%, 10% 45%);
}

.pc-markdown mark {
	padding: 0.05em 0.25em;
	color: var(--pc-color-on-tertiary-container);
	background: var(--pc-color-tertiary-container);
	border-radius: var(--pc-shape-corner-extra-small);
}

.pc-markdown abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 0.16em;
	cursor: help;
}

.pc-markdown dt {
	font-weight: 500;
}

.pc-markdown dd {
	margin-inline-start: var(--pc-density-space-xl);
	color: var(--pc-color-on-surface-variant);
}

.pc-markdown figure {
	margin-inline: 0;
}

.pc-markdown figcaption {
	margin-block-start: var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: calc(1rem * var(--pc-font-scale, 1));
}

.pc-markdown .footnotes {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-markdown__mermaid {
	display: grid;
	width: 100%;
	min-height: calc(8rem * var(--pc-font-scale, 1));
	box-sizing: border-box;
	place-items: center;
	padding: var(--pc-density-space-lg);
	overflow: auto;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
}

.pc-markdown__mermaid[aria-busy="true"] {
	background:
		linear-gradient(
			100deg,
			var(--pc-color-surface-container-low) 25%,
			var(--pc-color-surface-container-high) 45%,
			var(--pc-color-surface-container-low) 65%);
	background-size: 200% 100%;
	animation: pc-markdown-loading 1.25s ease-in-out infinite;
}

.pc-markdown__mermaid svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
}

.pc-markdown__mermaid--error {
	place-items: stretch;
	color: var(--pc-color-on-error-container);
	background: var(--pc-color-error-container);
	border-color: var(--pc-color-error);
}

.pc-markdown__mermaid--error > p {
	margin-block-start: 0;
	font-weight: 600;
}

.pc-markdown__mermaid--error pre {
	margin-block-end: 0;
}

.pc-markdown .pc-markdown__attachment {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: var(--pc-density-space-sm);
	box-sizing: border-box;
	padding: var(--pc-density-space-xs) var(--pc-density-space-md);
	overflow: hidden;
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.pc-markdown .pc-markdown__attachment::before {
	content: "📎";
	flex: 0 0 auto;
}

.pc-markdown .pc-markdown__attachment:hover {
	background: color-mix(
		in srgb,
		var(--pc-color-secondary-container) 82%,
		var(--pc-color-primary));
}

.pc-markdown .pc-markdown__attachment:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-markdown__attachment-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-markdown__attachment-status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: calc(0.125rem * var(--pc-font-scale, 1)) var(--pc-density-space-xs);
	color: var(--pc-color-on-warning-container);
	background: var(--pc-color-warning-container);
	border-radius: var(--pc-segmented-radius);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
}

.pc-markdown__attachment-status::before {
	content: "";
	width: calc(0.5rem * var(--pc-font-scale, 1));
	height: calc(0.5rem * var(--pc-font-scale, 1));
	box-sizing: border-box;
	border: calc(0.125rem * var(--pc-font-scale, 1)) solid currentColor;
	border-radius: 50%;
}

.pc-markdown .pc-markdown__attachment[data-pc-attachment-state="unavailable"] {
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container);
	border-style: dashed;
}

.pc-markdown .pc-markdown__attachment[data-pc-attachment-state="unavailable"] .pc-markdown__attachment-status {
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-high);
}

.pc-markdown__transient-image {
	display: block;
	min-width: min(100%, calc(12rem * var(--pc-font-scale, 1)));
	min-height: calc(8rem * var(--pc-font-scale, 1));
	object-fit: contain;
	background: var(--pc-color-surface-container);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-markdown__transient-image[data-pc-attachment-state="unavailable"] {
	border-style: dashed;
}

@keyframes pc-markdown-loading {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-markdown__mermaid[aria-busy="true"] {
		animation: none;
	}
}

.pc-markdown-editor {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-sm);
	color: var(--pc-color-on-surface);
}

.pc-markdown-editor__header {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
}

.pc-markdown-editor__label {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 600;
}

.pc-markdown-editor__write,
.pc-markdown-editor__preview {
	min-width: 0;
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-medium);
	background: var(--pc-color-surface);
}

.pc-markdown-editor__write:focus-within {
	border-color: var(--pc-color-primary);
	box-shadow: 0 0 0 1px var(--pc-color-primary);
}

.pc-markdown-editor--error .pc-markdown-editor__write {
	border-color: var(--pc-color-error);
}

.pc-markdown-editor__toolbar {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: var(--pc-density-space-sm);
	background: var(--pc-color-surface-container-low);
	border-block-end: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium) var(--pc-shape-corner-medium) 0 0;
}

.pc-markdown-editor__tool {
	display: inline-flex;
	min-width: calc(2.5rem * var(--pc-font-scale, 1));
	min-height: calc(2.5rem * var(--pc-font-scale, 1));
	align-items: center;
	justify-content: center;
	padding: var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.pc-markdown-editor__tool:hover:not(:disabled) {
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
}

.pc-markdown-editor__tool:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 1px;
}

.pc-markdown-editor__tool:disabled {
	opacity: 0.45;
	cursor: default;
}

.pc-markdown-editor__media-tools {
	display: inline-flex;
	flex: 0 0 auto;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	margin-inline-start: auto;
}

.pc-markdown-editor__picker {
	cursor: pointer;
}

.pc-markdown-editor__picker-input:focus-visible + .pc-markdown-editor__picker {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 1px;
}

.pc-markdown-editor__picker--disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.pc-markdown-editor__input {
	display: block;
	width: 100%;
	min-height: calc(12rem * var(--pc-font-scale, 1));
	box-sizing: border-box;
	resize: vertical;
	padding: var(--pc-density-space-lg);
	color: var(--pc-color-on-surface);
	background: transparent;
	border: 0;
	outline: none;
	font: inherit;
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: calc(0.9375rem * var(--pc-font-scale, 1));
	line-height: 1.55;
}

.pc-markdown-editor__preview {
	min-height: calc(12rem * var(--pc-font-scale, 1));
	padding: var(--pc-density-space-lg);
	overflow: auto;
}

.pc-markdown-editor__empty {
	margin: 0;
	color: var(--pc-color-on-surface-variant);
}

.pc-markdown-editor--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

.pc-markdown-editor--split .pc-markdown-editor__header,
.pc-markdown-editor--split .pc-markdown-editor__support {
	grid-column: 1 / -1;
}

.pc-markdown-editor__support {
	display: flex;
	min-width: 0;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-markdown-editor__error {
	color: var(--pc-color-error);
}

.pc-markdown-editor__count {
	margin-inline-start: auto;
	white-space: nowrap;
}

.pc-markdown-editor--disabled {
	opacity: 0.65;
}

@media (max-width: 48rem) {
	.pc-scheduler__toolbar-spacer {
		display: none;
	}

	.pc-scheduler__toolbar .pc-segmented-button {
		max-width: 100%;
		overflow-x: auto;
	}

	.pc-markdown-editor--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-markdown-editor--split .pc-markdown-editor__header,
	.pc-markdown-editor--split .pc-markdown-editor__support {
		grid-column: 1;
	}
}

/*
 * Grid surface and host contract.
 *
 * The paper tokens (--pc-data-grid-background, --pc-data-grid-radius) and the host-fill tokens
 * (--pc-data-grid-host-block-size, --pc-data-grid-host-viewport-flex) are only ever CONSUMED here,
 * with fallbacks, and never declared on .pc-data-grid itself, so an ancestor (an application page,
 * a dialog body, a card) can set them and every grid below inherits them. The one exception is
 * FillContainer, which declares the host-fill tokens on its own root, and the nested-grid reset
 * below, which restores the fallbacks.
 */
.pc-data-grid {
	display: flex;
	min-width: 0;
	block-size: var(--pc-data-grid-host-block-size, auto);
	flex-direction: column;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-data-grid-background, var(--pc-color-surface));
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-data-grid-radius, var(--pc-shape-corner-large));
}

/* FillContainer: take the host's full block size and let the rows scroll in the viewport. */
.pc-data-grid--fill-container {
	--pc-data-grid-host-block-size: 100%;
	--pc-data-grid-host-viewport-flex: 1 1 0;
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
}

/* A grid inside another grid (an expanded detail row) never inherits its host's fill: it sizes to
   its own content unless it is itself a FillContainer grid. */
.pc-data-grid .pc-data-grid:not(.pc-data-grid--fill-container) {
	--pc-data-grid-host-block-size: auto;
	--pc-data-grid-host-viewport-flex: 0 1 auto;
	/* initial is the guaranteed-invalid value, so the viewport falls back to the grid's MaxHeight. */
	--pc-data-grid-host-viewport-max-height: initial;
}

/* Plain: a grid inside a host that already draws the frame (tab panel, expansion panel, detail page
   paper, dialog body). The host owns the border, radius and elevation. */
.pc-data-grid--plain {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.pc-data-grid--plain .pc-data-grid__body {
	background: transparent;
}

/* Dense rows: the grid's row height and cell padding step down to the theme's control size, so
   the dense geometry still follows the active density and font scale. */
.pc-data-grid--dense {
	--pc-density-row-height: var(--pc-density-control-medium);
	--pc-density-cell-padding-inline: var(--pc-density-space-md);
}

/*
 * The toolbar and the filters sit in one inner container. Its own width, not the viewport's, drives
 * the toolbar's narrow step below, so a grid in a dialog, split pane or card re-flows by the room it
 * actually has. The container is this element and not the grid root: inline-size containment on the
 * root would give the grid an intrinsic width of 0 and collapse it in shrink-to-fit hosts
 * (content-sized dialogs, inline-flex rows, fit-content cards). It is as wide as the grid
 * (width: 100%), so it never affects the grid's own sizing. The phone list drops it again
 * (display: contents) so the sticky toolbar scrolls against the page.
 */
.pc-data-grid__toolbar-container {
	width: 100%;
	min-width: 0;
	container-type: inline-size;
	container-name: pc-data-grid-toolbar;
}

.pc-data-grid__toolbar {
	display: grid;
	grid-template-columns: minmax(calc(10rem * var(--pc-font-scale, 1)), 1fr) minmax(calc(15rem * var(--pc-font-scale, 1)), calc(35rem * var(--pc-font-scale, 1))) auto auto;
	gap: var(--pc-density-space-md);
	align-items: center;
	padding: var(--pc-density-space-lg);
}

.pc-data-grid__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pc-data-grid__heading .pc-text--body-small {
	color: var(--pc-color-on-surface-variant);
}

.pc-data-grid__search .pc-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.pc-data-grid__search .pc-field__container {
	min-height: var(--pc-density-control-large);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-full);
	box-shadow: none;
}

.pc-data-grid__search .pc-field__input {
	min-height: calc(var(--pc-density-control-large) - 0.125rem);
	padding-block: var(--pc-density-space-sm);
}

.pc-data-grid__header-actions,
.pc-data-grid__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

/* A host's actions that render nothing (none apply to the user, or every one moved into the
   overflow menu) leave no empty cluster, so its gap and track do not push the others aside. */
.pc-data-grid__header-actions:not(:has(> *)) {
	display: none;
}

.pc-data-grid__view-actions {
	display: flex;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

/* The toolbar's overflow (More options) menu: always the last control of the trailing cluster. */
.pc-data-grid__overflow-menu {
	display: flex;
	align-items: center;
}

/* Toolbar without a visible title and/or search field. The visually hidden heading is
   absolutely positioned, so it takes no grid track; the remaining actions move to the end. */
.pc-data-grid__toolbar--untitled {
	grid-template-columns: minmax(calc(15rem * var(--pc-font-scale, 1)), calc(35rem * var(--pc-font-scale, 1))) minmax(0, 1fr) auto;
}

.pc-data-grid__toolbar--no-search {
	grid-template-columns: minmax(calc(10rem * var(--pc-font-scale, 1)), 1fr) auto auto;
}

.pc-data-grid__toolbar--untitled.pc-data-grid__toolbar--no-search {
	grid-template-columns: minmax(0, 1fr) auto;
}

.pc-data-grid__toolbar--untitled .pc-data-grid__header-actions,
.pc-data-grid__toolbar--untitled .pc-data-grid__view-actions,
.pc-data-grid__toolbar--no-search .pc-data-grid__header-actions {
	justify-self: end;
}

/* The last toolbar action: shown in place (before the tooltip enhancement loads), a centred
   bubble overhangs the grid's clipped right edge. Anchored to the button's end instead; the
   enhancement's inline top-layer position overrides this. */
.pc-tooltip.pc-data-grid__customise-action > .pc-tooltip__bubble {
	right: 0;
	left: auto;
	transform: none;
}

/*
 * Narrow toolbar (less than 56rem of toolbar width): the search moves to its own row under the
 * title and actions instead of being clipped by the grid's overflow, and the actions wrap onto a
 * new line rather than overflowing. Fixed breakpoint: container conditions cannot read the font
 * scale, but the minimum widths below still follow it.
 */
@container pc-data-grid-toolbar (max-width: 56rem) {
	.pc-data-grid__toolbar {
		display: flex;
		flex-wrap: wrap;
	}

	.pc-data-grid__toolbar > .pc-data-grid__heading {
		flex: 1 1 calc(10rem * var(--pc-font-scale, 1));
	}

	.pc-data-grid__toolbar > .pc-data-grid__search {
		order: 1;
		min-width: 0;
		flex: 1 1 100%;
	}

	/* The actions stay at the end of the first row, also when the title is visually hidden. */
	.pc-data-grid__toolbar > .pc-data-grid__header-actions,
	.pc-data-grid__toolbar > .pc-data-grid__view-actions {
		margin-inline-start: auto;
	}

	.pc-data-grid__toolbar > .pc-data-grid__header-actions:has(> *) ~ .pc-data-grid__view-actions {
		margin-inline-start: 0;
	}
}

/*
 * Toolbar filters (ToolbarFilters): the host's key filters in their own track just before the
 * search, while the toolbar has room for them. The slot is hidden by default and shown only by the
 * container query below, so the phone list (whose toolbar container is no query container), a
 * narrow section or dialog, and a browser without container queries keep the filters in the filter
 * builder, and the toolbar never flashes. The grid watches the slot's display to know which
 * (connectDataGridToolbarFilters), so the filters are only ever in one place.
 */
.pc-data-grid__toolbar-filters {
	display: none;
	min-width: 0;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-data-grid__toolbar-filters > * {
	flex: 1 1 0;
	min-width: 0;
}

/* A control's label stays its accessible name, as the search's does; its placeholder or value says
   what it filters. It takes the search's height and shape, so the two read as one row of controls. */
.pc-data-grid__toolbar-filters .pc-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.pc-data-grid__toolbar-filters .pc-field__container {
	min-height: var(--pc-density-control-large);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-full);
	box-shadow: none;
}

.pc-data-grid__toolbar-filters .pc-field__input,
.pc-data-grid__toolbar-filters .pc-multi-select__trigger {
	min-height: calc(var(--pc-density-control-large) - 0.125rem);
	padding-block: var(--pc-density-space-sm);
}

/* The search's text size too (a multiple choice's trigger otherwise takes the toolbar's smaller text). */
.pc-data-grid__toolbar-filters .pc-multi-select__trigger {
	font-size: calc(1rem * var(--pc-font-scale, 1));
}

/* One line: a long choice ends in an ellipsis (its control gives the full text as a tooltip). */
.pc-data-grid__toolbar-filters .pc-multi-select__selection {
	flex-wrap: nowrap;
	overflow: hidden;
}

/*
 * Room for the toolbar filters: from 58em of toolbar width (the toolbar's font size, so a larger text
 * scale needs a wider toolbar) and never inside the narrow step above. A toolbar at its fullest - a
 * short title, the filter, the search and five 40px actions - needs about 56rem of it at its minimum
 * tracks. A fixed breakpoint cannot count the host's actions, so toolbar filters suit grids with no
 * more than that. The heading gives way first; the filters take 14-18rem and the search keeps its
 * own range.
 */
@container pc-data-grid-toolbar (width >= 58em) and (width > 56rem) {
	.pc-data-grid__toolbar--filters {
		grid-template-columns:
			minmax(calc(8rem * var(--pc-font-scale, 1)), 1fr)
			minmax(calc(14rem * var(--pc-font-scale, 1)), calc(18rem * var(--pc-font-scale, 1)))
			minmax(calc(15rem * var(--pc-font-scale, 1)), calc(35rem * var(--pc-font-scale, 1)))
			auto
			auto;
	}

	.pc-data-grid__toolbar--filters.pc-data-grid__toolbar--untitled {
		grid-template-columns:
			minmax(calc(14rem * var(--pc-font-scale, 1)), calc(18rem * var(--pc-font-scale, 1)))
			minmax(calc(15rem * var(--pc-font-scale, 1)), calc(35rem * var(--pc-font-scale, 1)))
			minmax(0, 1fr)
			auto;
	}

	.pc-data-grid__toolbar--filters.pc-data-grid__toolbar--no-search {
		grid-template-columns:
			minmax(calc(8rem * var(--pc-font-scale, 1)), 1fr)
			minmax(calc(14rem * var(--pc-font-scale, 1)), calc(18rem * var(--pc-font-scale, 1)))
			auto
			auto;
	}

	.pc-data-grid__toolbar--filters.pc-data-grid__toolbar--untitled.pc-data-grid__toolbar--no-search {
		grid-template-columns:
			minmax(calc(14rem * var(--pc-font-scale, 1)), calc(18rem * var(--pc-font-scale, 1)))
			minmax(0, 1fr)
			auto;
	}

	.pc-data-grid__toolbar--filters > .pc-data-grid__toolbar-filters {
		display: flex;
	}
}

.pc-data-grid__filter-badge {
	align-self: center;
}

.pc-data-grid__filters {
	padding: 0 var(--pc-density-space-lg) var(--pc-density-space-lg);
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

/* The viewport takes the remaining height only when the host asks for it (FillContainer, or
   --pc-data-grid-host-viewport-flex set by an ancestor); otherwise it is as tall as its rows. */
.pc-data-grid__viewport {
	min-width: 0;
	flex: var(--pc-data-grid-host-viewport-flex, 0 1 auto);
	overflow: auto;
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid--fill-container .pc-data-grid__viewport {
	min-height: 0;
}

/*
 * The table element is the single sized box for the desktop layout. The header
 * and every row stretch to its width, so their identical grid templates
 * resolve to identical tracks. Sizing the header and rows individually lets
 * every row derive its own column widths from its own content, which
 * misaligns column boundaries between virtualized render chunks.
 *
 * The table is as wide as the viewport, never as wide as its content: under
 * max-content sizing a flexible track resolves to (longest cell / its fr), so
 * one long value widened every column and the table ran to thousands of
 * pixels. Columns take their declared size, share any spare width by their
 * fr, and cut long values off with an ellipsis.
 * --pc-data-grid-min-width is the sum of the column floors (a column the user
 * widened counts at its new width), so the table scrolls sideways only when
 * the declared or widened columns do not fit.
 */
.pc-data-grid__table {
	width: auto;
	min-width: max(100%, var(--pc-data-grid-min-width, calc(45rem * var(--pc-font-scale, 1))));
	/*
	 * The divider under the last row (or detail, collapsed group or
	 * FooterContent): ink overflow 1px below the table, so it shows only when
	 * the rows leave room in the viewport. When the table reaches the viewport
	 * edge it is clipped, and the footer's or paper's rule is the only line.
	 * It never adds scroll range.
	 */
	box-shadow: 0 1px 0 var(--pc-color-outline-variant);
}

/* Virtualised rows keep their own last border (spacers break :last-child), so no second line. */
.pc-data-grid--virtualized .pc-data-grid__table {
	box-shadow: none;
}

/*
 * No rows: the empty state is centred in the visible part of the paper, not
 * spread across a table wider than the viewport, and in the remaining height
 * when the grid fills its host. The header row still keeps its column floors
 * and scrolls sideways on its own.
 */
.pc-data-grid__table:not(:has(.pc-data-grid__row, .pc-data-grid__virtual-placeholder, .pc-data-grid__group-row)) {
	display: flex;
	min-width: 100%;
	min-height: 100%;
	flex-direction: column;
}

.pc-data-grid__table:not(:has(.pc-data-grid__row, .pc-data-grid__virtual-placeholder, .pc-data-grid__group-row)) > .pc-data-grid__body {
	display: flex;
	min-width: 0;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
}

.pc-data-grid__table:not(:has(.pc-data-grid__row, .pc-data-grid__virtual-placeholder, .pc-data-grid__group-row)) > .pc-data-grid__desktop-header {
	min-width: var(--pc-data-grid-min-width, 100%);
}

.pc-data-grid__desktop-header,
.pc-data-grid__desktop-row {
	display: grid;
	grid-template-columns: var(--pc-data-grid-columns);
}

.pc-data-grid__desktop-header {
	position: sticky;
	z-index: 4;
	top: 0;
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-data-grid-header-background);
}

.pc-data-grid--column-filter-open .pc-data-grid__desktop-header {
	z-index: calc(var(--pc-z-popover, 95) + 1);
}

.pc-data-grid__header-cell,
.pc-data-grid__cell {
	display: flex;
	min-width: 0;
	align-items: center;
	padding: 0 var(--pc-density-cell-padding-inline);
	border-right: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid__header-cell {
	position: relative;
	min-height: calc(var(--pc-density-row-height) - 0.25rem);
	gap: var(--pc-density-space-xs);
	background: var(--pc-data-grid-header-background);
	border-bottom: 1px solid var(--pc-color-outline-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

/*
 * The whole header cell is the reorder drag surface (the grip icon stays as
 * the visible affordance; filter and resize controls are vetoed in the
 * interaction module), so the cell itself signals draggability.
 */
.pc-data-grid__header-cell[draggable="true"] {
	cursor: grab;
}

.pc-navigation-guard__message {
	margin: 0;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: 1.5;
}

/*
 * Solid drag preview: a clone of the dragged header cell or customise row,
 * parked off-screen just long enough for setDragImage to snapshot it. Opaque
 * surface and real elevation make the dragged item read as a solid card
 * (matching the kanban drag) instead of the browser's translucent default.
 */
.pc-data-grid__drag-image {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	margin: 0;
	background: var(--pc-color-surface-container-high);
	border: 1px solid var(--pc-color-outline-variant);
	border-bottom: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-small);
	box-shadow: var(--pc-elevation-level-3);
	pointer-events: none;
	transform: translate(-10000px, -10000px);
}

/* The touch and pen drag of a customise row: the same solid clone follows the finger above the
   dialog (the interaction module sets its transform). Two classes so it stays fixed over the row
   classes it was cloned with. */
.pc-data-grid__drag-image.pc-data-grid__drag-image--pointer {
	position: fixed;
	z-index: calc(var(--pc-z-snackbar, 100) + 1);
	top: 0;
	left: 0;
	margin: 0;
	will-change: transform;
}

.pc-data-grid__column-reorder-handle {
	display: grid;
	width: calc(1.75rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	flex: 0 0 calc(1.75rem * var(--pc-font-scale, 1));
	padding: 0;
	color: var(--pc-color-on-surface-variant);
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	opacity: .58;
	cursor: grab;
	place-items: center;
	touch-action: manipulation;
}

.pc-data-grid__column-reorder-handle:hover,
.pc-data-grid__column-reorder-handle:focus-visible {
	color: var(--pc-color-primary);
	background: var(--pc-color-surface-container-high);
	opacity: 1;
	outline: 0;
}

.pc-data-grid__column-reorder-handle:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pc-color-primary);
}

.pc-data-grid__column-reorder-handle:active {
	cursor: grabbing;
}

.pc-data-grid__header-cell--dragging {
	opacity: .55;
}

.pc-data-grid__header-cell--drop-before::before,
.pc-data-grid__header-cell--drop-after::after {
	position: absolute;
	z-index: 4;
	top: calc(0.25rem * var(--pc-font-scale, 1));
	bottom: calc(0.25rem * var(--pc-font-scale, 1));
	width: 3px;
	content: "";
	background: var(--pc-color-primary);
	border-radius: var(--pc-shape-corner-full);
	pointer-events: none;
}

.pc-data-grid__header-cell--drop-before::before {
	left: -2px;
}

.pc-data-grid__header-cell--drop-after::after {
	right: -2px;
}

.pc-data-grid__column-resize-handle {
	position: absolute;
	z-index: 4;
	top: 0;
	right: calc(-0.375rem * var(--pc-font-scale, 1));
	width: calc(0.75rem * var(--pc-font-scale, 1));
	height: 100%;
	cursor: col-resize;
	touch-action: none;
}

/* The last column's handle stays inside the table, which is exactly as wide as the paper: half
   of it past the edge would make the viewport scroll sideways by a few pixels. */
.pc-data-grid__header-cell:last-child > .pc-data-grid__column-resize-handle {
	right: 0;
}

.pc-data-grid__column-resize-handle::after {
	position: absolute;
	top: calc(0.5rem * var(--pc-font-scale, 1));
	bottom: calc(0.5rem * var(--pc-font-scale, 1));
	left: calc(0.3125rem * var(--pc-font-scale, 1));
	width: 2px;
	content: "";
	background: var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-full);
	opacity: 0;
	transition:
		background var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-data-grid__header-cell:hover > .pc-data-grid__column-resize-handle::after,
.pc-data-grid__column-resize-handle:focus-visible::after,
.pc-data-grid__column-resize-handle--active::after {
	background: var(--pc-color-primary);
	opacity: 1;
}

.pc-data-grid__column-resize-handle:focus-visible {
	outline: 0;
}

.pc-data-grid__column-resize-handle:focus-visible::after {
	width: 3px;
	box-shadow: 0 0 0 2px var(--pc-color-primary-container);
}

.pc-data-grid--resizing,
.pc-data-grid--resizing * {
	cursor: col-resize !important;
	user-select: none !important;
}

.pc-data-grid__header-cell--sortable {
	padding-inline: 0 calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-data-grid__header-cell:last-child,
.pc-data-grid__cell:last-child {
	border-right: 0;
}

.pc-data-grid__header-label {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	align-self: stretch;
	align-items: center;
	overflow: hidden;
}

.pc-data-grid__sort-button {
	display: flex;
	width: 100%;
	min-width: 0;
	height: 100%;
	align-items: center;
	gap: var(--pc-density-space-xs);
	margin: 0;
	padding-inline: var(--pc-density-cell-padding-inline) var(--pc-density-space-sm);
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	font: inherit;
	font-weight: inherit;
	text-align: left;
	cursor: pointer;
}

.pc-data-grid__header-label > span,
.pc-data-grid__sort-button > span {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid__sort-button > span {
	flex: 1 1 auto;
}

.pc-data-grid__sort-button > .pc-icon {
	flex: 0 0 auto;
}
.pc-data-grid__sort-button:hover,
.pc-data-grid__sort-button:focus-visible {
	color: var(--pc-color-primary);
	background: var(--pc-color-surface-container-high);
	outline: 0;
}

.pc-data-grid__header-cell--filtered {
	color: var(--pc-color-primary);
}

.pc-data-grid__column-filter {
	position: relative;
	display: flex;
	flex: 0 0 auto;
}

.pc-data-grid__column-filter-button {
	width: calc(2rem * var(--pc-font-scale, 1));
	height: calc(2rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-filter-button .pc-icon {
	width: calc(1.125rem * var(--pc-font-scale, 1));
	height: calc(1.125rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-filter-menu {
	position: absolute;
	z-index: 8;
	top: calc(100% + calc(0.5rem * var(--pc-font-scale, 1)));
	display: flex;
	width: min(calc(20rem * var(--pc-font-scale, 1)), calc(100vw - calc(3rem * var(--pc-font-scale, 1))));
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
	box-shadow: var(--pc-elevation-level-3);
}

.pc-data-grid__column-filter--align-start .pc-data-grid__column-filter-menu {
	right: auto;
	left: calc(-0.5rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-filter--align-end .pc-data-grid__column-filter-menu {
	right: calc(-0.5rem * var(--pc-font-scale, 1));
	left: auto;
}

.pc-data-grid__column-filter-menu::before {
	position: absolute;
	top: calc(-0.4375rem * var(--pc-font-scale, 1));
	width: calc(0.75rem * var(--pc-font-scale, 1));
	height: calc(0.75rem * var(--pc-font-scale, 1));
	content: "";
	background: var(--pc-color-surface-container-high);
	border-top: 1px solid var(--pc-color-outline-variant);
	border-left: 1px solid var(--pc-color-outline-variant);
	transform: rotate(45deg);
}

.pc-data-grid__column-filter--align-start .pc-data-grid__column-filter-menu::before {
	right: auto;
	left: calc(1.0625rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-filter--align-end .pc-data-grid__column-filter-menu::before {
	right: calc(1.0625rem * var(--pc-font-scale, 1));
	left: auto;
}

/*
	Positioned by the browser helper (connectAnchoredPopover): in the top layer, fixed to the
	viewport, so a grid with a fixed height no longer clips it. Placed above its column, or moved
	along the viewport edge, the arrow would point at the wrong place, so it is dropped.
*/
.pc-data-grid__column-filter-menu[popover]:popover-open {
	position: fixed;
	inset: auto;
	margin: 0;
}

/* The helper lines the menu up with the filter control's own edge, not 0.5rem beyond it. */
.pc-data-grid__column-filter--align-start .pc-data-grid__column-filter-menu[data-positioned="true"]::before {
	left: calc(0.625rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-filter--align-end .pc-data-grid__column-filter-menu[data-positioned="true"]::before {
	right: calc(0.625rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-filter-menu:is([data-placement="top"], [data-viewport-shifted="true"])::before {
	display: none;
}

.pc-data-grid__column-filter-actions {
	display: flex;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	justify-content: flex-end;
}

.pc-data-grid__filter-values {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	min-width: 0;
}

.pc-data-grid__filter-no-value {
	color: var(--pc-color-on-surface-variant);
}

.pc-data-grid__body {
	min-width: 0;
	background: var(--pc-data-grid-background, var(--pc-color-surface));
}

.pc-data-grid__row-set {
	min-width: 0;
}

.pc-data-grid__row {
	cursor: default;
}

/* The hover and editing layer. An ancestor can set --pc-data-grid-row-hover-background when its
   paper (--pc-data-grid-background) is itself surface-container-low, as a dark app paper can be,
   so the row still changes under the pointer. */
.pc-data-grid__row:hover {
	background: var(--pc-data-grid-row-hover-background, var(--pc-color-surface-container-low));
}

.pc-data-grid__row:hover .pc-data-grid__cell {
	background: var(--pc-data-grid-row-hover-background, var(--pc-color-surface-container-low));
}

/* Alternate-row shading sits between the resting surface and the hover layer. Hover outranks it
   by specificity and selection/editing are declared after it, so all three still read on a
   shaded row. */
.pc-data-grid__row--striped .pc-data-grid__cell {
	background: color-mix(in srgb, var(--pc-data-grid-row-hover-background, var(--pc-color-surface-container-low)) 55%, var(--pc-data-grid-background, var(--pc-color-surface)));
}

.pc-data-grid__row--selection-click,
.pc-data-grid__row--clickable {
	cursor: pointer;
}

.pc-data-grid__row[aria-selected="true"] {
	background: var(--pc-color-secondary-container);
}

.pc-data-grid__row[aria-selected="true"] .pc-data-grid__cell {
	background: var(--pc-color-secondary-container);
}

.pc-data-grid__row--editing .pc-data-grid__cell {
	background: var(--pc-data-grid-row-hover-background, var(--pc-color-surface-container-low));
}

.pc-data-grid__row--virtualized {
	height: var(--pc-data-grid-item-size, auto);
	min-height: var(--pc-data-grid-item-size, var(--pc-density-row-height));
	overflow: hidden;
	contain: layout paint style;
}

.pc-data-grid__row--virtualized .pc-data-grid__desktop-row,
.pc-data-grid__row--virtualized .pc-data-grid__mobile-row {
	height: 100%;
	overflow: hidden;
}

.pc-data-grid__cell {
	min-height: var(--pc-density-row-height);
	overflow: hidden;
	border-bottom: 1px solid var(--pc-color-outline-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid:not(.pc-data-grid--virtualized)
	.pc-data-grid__body
	> .pc-data-grid__row-set:last-child
	> .pc-data-grid__row:last-child
	.pc-data-grid__cell {
	border-bottom: 0;
}

/* A collapsed last group: its header is the last row, and the table's ink divider closes it. */
.pc-data-grid:not(.pc-data-grid--virtualized)
	.pc-data-grid__body
	> .pc-data-grid__group-row:last-child
	> .pc-data-grid__group-cell {
	border-bottom: 0;
}

.pc-data-grid__cell > * {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A text link is a flex container, whose text never shows an ellipsis; in a cell it is a block, so
   a long link ends in one like plain text. A link with an icon keeps its flex layout. */
.pc-data-grid__cell > .pc-link:not(:has(> .pc-icon)) {
	display: block;
	white-space: nowrap;
}

.pc-data-grid__cell--align-center {
	justify-content: center;
	text-align: center;
}

.pc-data-grid__cell--align-end {
	justify-content: flex-end;
	text-align: end;
}

.pc-data-grid__header-cell--align-center .pc-data-grid__header-label,
.pc-data-grid__header-cell--align-center .pc-data-grid__sort-button {
	justify-content: center;
	text-align: center;
}

.pc-data-grid__header-cell--align-end .pc-data-grid__header-label,
.pc-data-grid__header-cell--align-end .pc-data-grid__sort-button {
	justify-content: flex-end;
	text-align: end;
}

.pc-data-grid__header-cell--align-center .pc-data-grid__sort-button > span,
.pc-data-grid__header-cell--align-end .pc-data-grid__sort-button > span {
	flex: 0 1 auto;
}

.pc-data-grid__cell--editing {
	position: relative;
	min-height: var(--pc-density-row-height);
	align-items: stretch;
	padding: 0;
	overflow: visible;
	white-space: normal;
	contain: inline-size;
}

.pc-data-grid__cell--editing > .pc-field {
	height: var(--pc-density-row-height);
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	gap: 0;
	overflow: visible;
}

.pc-data-grid__cell--editing > .pc-field > .pc-field__label,
.pc-data-grid__cell--editing > .pc-field > .pc-field__support {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pc-data-grid__cell--editing > .pc-field > .pc-field__anchor,
.pc-data-grid__cell--editing > .pc-field > .pc-select__anchor,
.pc-data-grid__cell--editing > .pc-field > .pc-multi-select__anchor,
.pc-data-grid__cell--editing > .pc-field > .pc-color-picker__anchor {
	display: flex;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
	overflow: visible;
}

.pc-data-grid__cell--editing > .pc-field .pc-field__container,
.pc-data-grid__cell--editing > .pc-field .pc-field__container:focus-within {
	width: 100%;
	height: 100%;
	min-height: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pc-data-grid__cell--editing > .pc-field .pc-field__input {
	height: 100%;
	min-height: 0;
	padding-block: 0;
	padding-inline: var(--pc-density-cell-padding-inline);
	font-size: inherit;
	line-height: inherit;
}

.pc-data-grid__cell--dirty::after {
	position: absolute;
	z-index: 3;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: calc(0.625rem * var(--pc-font-scale, 1));
	height: calc(0.625rem * var(--pc-font-scale, 1));
	content: "";
	background: var(--pc-color-tertiary);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
}

.pc-data-grid__cell--editing:focus-within {
	z-index: 1;
	box-shadow: inset 0 0 0 2px var(--pc-color-primary);
}

.pc-data-grid__cell--invalid,
.pc-data-grid__cell--invalid:focus-within {
	z-index: 2;
	box-shadow: inset 0 0 0 2px var(--pc-color-error);
}

.pc-data-grid__detail-toggle-cell {
	justify-content: center;
	padding-inline: var(--pc-density-space-xs);
}

.pc-data-grid__detail-toggle {
	flex: 0 0 auto;
}

.pc-data-grid__selection-cell {
	justify-content: center;
	padding-inline: var(--pc-density-space-xs);
}

.pc-data-grid__selector {
	min-height: var(--pc-density-control-medium);
}

.pc-data-grid__selector .pc-choice__copy {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.pc-data-grid__actions-cell {
	position: sticky;
	z-index: 2;
	right: 0;
	justify-content: flex-end;
	background: var(--pc-data-grid-background, var(--pc-color-surface));
	box-shadow: -1px 0 0 var(--pc-color-outline-variant);
}

.pc-data-grid__row--editing .pc-data-grid__actions-cell {
	overflow: visible;
}

.pc-data-grid__desktop-header .pc-data-grid__actions-cell {
	z-index: 5;
	background: var(--pc-data-grid-header-background);
}

.pc-data-grid__row:hover .pc-data-grid__actions-cell {
	background: var(--pc-data-grid-row-hover-background, var(--pc-color-surface-container-low));
}

.pc-data-grid__row[aria-selected="true"] .pc-data-grid__actions-cell {
	background: var(--pc-color-secondary-container);
}

.pc-data-grid__row-actions {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--pc-density-space-xs);
	justify-content: flex-end;
}

/* The row's actions menu (the table's one actions button, and the phone list's overflow). */
.pc-data-grid__row-actions-items {
	display: flex;
	flex-direction: column;
}

/* A row with no commands to offer says so instead of opening an empty surface. Only elements
   count: row actions are elements, and a value written out as bare text is not a command (data is
   a column; GridCallSiteScanTests rejects text in a client's row actions). */
.pc-data-grid__row-actions-items:not(:has(> *))::before {
	content: attr(data-empty-text);
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

/* Destructive commands come last, set apart by a divider from the commands before them. */
.pc-data-grid__row-actions-items > :not(.pc-menu-item--destructive) + .pc-menu-item--destructive {
	position: relative;
	margin-block-start: calc(var(--pc-density-space-sm) * 2 + 1px);
}

.pc-data-grid__row-actions-items > :not(.pc-menu-item--destructive) + .pc-menu-item--destructive::before {
	position: absolute;
	inset-inline: 0;
	top: calc(-1 * var(--pc-density-space-sm) - 1px);
	border-top: 1px solid var(--pc-color-outline-variant);
	content: "";
	pointer-events: none;
}

/* Buttons that are not row actions yet (a call site still to be converted) keep working in the
   menu; they are laid out plainly, one per line. */
.pc-data-grid__row-actions-items > :not(.pc-menu-item, .pc-submenu) {
	align-self: flex-start;
	margin: var(--pc-density-space-xs) var(--pc-density-space-lg);
}

/* Same shared width as the data rows above it: a detail panel sized to its own content would be
   wider or narrower than the row it belongs to, and the two would visibly disagree. */
.pc-data-grid__detail-row {
	display: grid;
	grid-template-columns: var(--pc-data-grid-columns);
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-lowest, var(--pc-color-surface));
}

/*
 * inline-size containment keeps arbitrary detail content from contributing
 * to the shared table width; wide content scrolls inside the cell instead of
 * widening every row.
 */
.pc-data-grid__detail-cell {
	grid-column: 1 / -1;
	min-width: 0;
	padding: var(--pc-density-space-lg);
	overflow: auto;
	border-bottom: 1px solid var(--pc-color-outline-variant);
	contain: inline-size;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	white-space: normal;
}

.pc-data-grid__row-set:last-child .pc-data-grid__detail-cell {
	border-bottom: 0;
}

/* Group header rows span every column at the shared table width, like detail rows. */
.pc-data-grid__group-row {
	display: grid;
	grid-template-columns: var(--pc-data-grid-columns);
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container);
}

.pc-data-grid__group-cell {
	display: flex;
	min-width: 0;
	min-height: var(--pc-density-row-height);
	grid-column: 1 / -1;
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-xs) var(--pc-density-cell-padding-inline) var(--pc-density-space-xs) var(--pc-density-space-xs);
	border-bottom: 1px solid var(--pc-color-outline-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-data-grid__group-toggle {
	flex: 0 0 auto;
}

.pc-data-grid__group-content {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-data-grid__group-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid__group-count {
	padding: 0 var(--pc-density-space-sm);
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-high);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
}

/* Consumer footer content (totals, load more) after the last row, spanning every column. */
.pc-data-grid__after-rows {
	display: grid;
	grid-template-columns: var(--pc-data-grid-columns);
}

.pc-data-grid__after-rows-cell {
	min-width: 0;
	grid-column: 1 / -1;
	padding: var(--pc-density-space-sm) var(--pc-density-cell-padding-inline);
	border-top: 1px solid var(--pc-color-outline-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-data-grid__mobile-row {
	display: none;
}

.pc-data-grid__virtual-placeholder {
	height: var(--pc-data-grid-item-size, auto);
	min-height: var(--pc-data-grid-item-size, var(--pc-density-row-height));
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid__footer {
	display: flex;
	min-height: calc(var(--pc-density-control-large) + var(--pc-density-space-lg));
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-lg);
	justify-content: flex-end;
	padding: var(--pc-density-space-sm) var(--pc-density-space-lg);
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid__result-count {
	margin-right: auto;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

/* The table's selection count sits beside the result count ("12 items", "3 selected, 1 hidden by the
   search or filters"), with the paging controls still at the end. */
.pc-data-grid__result-count:has(+ .pc-data-grid__table-selection-count) {
	margin-right: 0;
}

.pc-data-grid__table-selection-count {
	margin-right: auto;
	color: var(--pc-color-primary);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
}

.pc-data-grid__page-size {
	width: auto;
	min-width: calc(8.25rem * var(--pc-font-scale, 1));
}

.pc-data-grid__page-size .pc-field {
	display: grid;
	grid-template-columns: max-content minmax(calc(4.5rem * var(--pc-font-scale, 1)), 1fr);
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-data-grid__page-size .pc-field__container {
	min-height: calc(2.5rem * var(--pc-font-scale, 1));
	min-width: calc(4.5rem * var(--pc-font-scale, 1));
	background: transparent;
	border: 0;
}

.pc-data-grid__page-size .pc-field__input {
	min-height: calc(2.5rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(1.75rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-data-grid__page-size .pc-field__select-icon {
	margin-right: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-data-grid__page-size .pc-select__surface {
	top: auto;
	bottom: calc(100% + calc(0.25rem * var(--pc-font-scale, 1)));
}

.pc-data-grid__column-settings {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pc-data-grid__column-customisation {
	display: flex;
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-data-grid__mobile-field-customisation {
	display: none;
	flex-direction: column;
	gap: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-data-grid__customise-action--mobile-only {
	display: none;
}

.pc-data-grid__mobile-field-group {
	display: flex;
	flex-direction: column;
	gap: calc(0.375rem * var(--pc-font-scale, 1));
}

.pc-data-grid__mobile-field-group > p {
	color: var(--pc-color-on-surface-variant);
}

.pc-data-grid__mobile-field-settings {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: calc(0.375rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-insertion-zone,
.pc-data-grid__mobile-field-insertion-zone {
	position: relative;
	z-index: 4;
	flex: 0 0 calc(1rem * var(--pc-font-scale, 1));
	min-height: calc(1rem * var(--pc-font-scale, 1));
	margin-block: calc(-0.25rem * var(--pc-font-scale, 1));
	pointer-events: none;
}

.pc-data-grid__column-settings--drag-active > .pc-data-grid__column-insertion-zone,
.pc-data-grid__mobile-field-settings--drag-active > .pc-data-grid__mobile-field-insertion-zone {
	pointer-events: auto;
}

.pc-data-grid__column-insertion-zone::after,
.pc-data-grid__mobile-field-insertion-zone::after {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: calc(0.5rem * var(--pc-font-scale, 1));
	left: calc(0.5rem * var(--pc-font-scale, 1));
	height: 3px;
	content: "";
	background: transparent;
	border-radius: var(--pc-shape-corner-full);
	box-shadow: none;
	transform: translateY(-50%);
	pointer-events: none;
}

.pc-data-grid__column-insertion-zone--active::after,
.pc-data-grid__mobile-field-insertion-zone--active::after,
.pc-data-grid__column-insertion-zone--pointer-target::after,
.pc-data-grid__mobile-field-insertion-zone--pointer-target::after {
	background: var(--pc-color-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-color-primary) 22%, transparent);
}

.pc-data-grid__column-setting {
	position: relative;
	display: flex;
	min-height: calc(3.5rem * var(--pc-font-scale, 1));
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.25rem * var(--pc-font-scale, 1)) calc(0.25rem * var(--pc-font-scale, 1)) calc(0.25rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-data-grid__mobile-field-setting {
	position: relative;
	display: flex;
	min-height: calc(3.5rem * var(--pc-font-scale, 1));
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	padding: calc(0.25rem * var(--pc-font-scale, 1)) calc(0.25rem * var(--pc-font-scale, 1)) calc(0.25rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-data-grid__column-setting[draggable="true"] {
	cursor: grab;
}

.pc-data-grid__mobile-field-setting[draggable="true"] {
	cursor: grab;
}

.pc-data-grid__column-setting--dragging,
.pc-data-grid__mobile-field-setting--dragging,
.pc-data-grid__column-setting--pointer-dragging,
.pc-data-grid__mobile-field-setting--pointer-dragging {
	opacity: .55;
	cursor: grabbing;
}

.pc-data-grid__column-setting--drop-before::before,
.pc-data-grid__column-setting--drop-after::after,
.pc-data-grid__mobile-field-setting--drop-before::before,
.pc-data-grid__mobile-field-setting--drop-after::after {
	position: absolute;
	z-index: 3;
	right: calc(0.5rem * var(--pc-font-scale, 1));
	left: calc(0.5rem * var(--pc-font-scale, 1));
	height: 3px;
	content: "";
	background: var(--pc-color-primary);
	border-radius: var(--pc-shape-corner-full);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-color-primary) 22%, transparent);
	pointer-events: none;
}

.pc-data-grid__column-setting--drop-before::before,
.pc-data-grid__mobile-field-setting--drop-before::before {
	top: calc(-0.25rem * var(--pc-font-scale, 1));
	transform: translateY(-50%);
}

.pc-data-grid__column-setting--drop-after::after,
.pc-data-grid__mobile-field-setting--drop-after::after {
	bottom: calc(-0.25rem * var(--pc-font-scale, 1));
	transform: translateY(50%);
}

.pc-data-grid__column-setting > .pc-choice,
.pc-data-grid__mobile-field-setting > .pc-choice {
	flex: 1 1 auto;
}

.pc-data-grid__column-setting-label {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid__column-drag {
	color: var(--pc-color-on-surface-variant);
}

/* Touch and pen drag a customise row from its grip (a pointer drag in the interaction module), so
   the grip keeps the gesture: no scrolling, text selection or callout under the finger. The row's
   draggable attribute is matched by presence because the drag sets it to false while it runs. */
.pc-data-grid__column-setting[draggable] > .pc-data-grid__column-drag,
.pc-data-grid__mobile-field-setting[draggable] > .pc-data-grid__column-drag {
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* A 48px touch target: the padding grows the grip's box and the negative margin keeps its place,
   so the row is no taller. */
@media (pointer: coarse) {
	.pc-data-grid__column-setting[draggable] > .pc-data-grid__column-drag,
	.pc-data-grid__mobile-field-setting[draggable] > .pc-data-grid__column-drag {
		box-sizing: content-box;
		padding: 12px;
		margin: -12px;
	}
}

.pc-data-grid__mobile-field-setting--fixed {
	cursor: default;
	background: var(--pc-color-surface-container);
}

.pc-data-grid__mobile-field-setting--fixed > .pc-choice {
	cursor: default;
	pointer-events: none;
}

.pc-data-grid__mobile-field-lock {
	margin-inline-end: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.pc-data-grid__mobile-field-empty {
	margin-top: calc(0.375rem * var(--pc-font-scale, 1));
	padding: calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-low);
	border-radius: var(--pc-shape-corner-medium);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-data-grid__column-order-actions {
	display: flex;
}

.pc-data-grid__mobile-additional-fields {
	display: grid;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	margin: calc(0.75rem * var(--pc-font-scale, 1)) 0 0;
	padding: calc(0.75rem * var(--pc-font-scale, 1)) 0 0;
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid__mobile-additional-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	align-items: baseline;
}

.pc-data-grid__mobile-additional-field dt {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-data-grid__mobile-additional-field dd {
	min-width: 0;
	margin: 0;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	overflow-wrap: anywhere;
	text-align: end;
}

.pc-data-grid__filter-builder {
	display: flex;
	flex-direction: column;
	gap: calc(1rem * var(--pc-font-scale, 1));
}

.pc-data-grid__filter-logic {
	max-width: calc(17.5rem * var(--pc-font-scale, 1));
}

/* A host's own filters at the top of the builder (FilterBuilderContent), set apart from the
   conditions under them. */
.pc-data-grid__filter-builder-content {
	display: flex;
	flex-direction: column;
	gap: calc(1rem * var(--pc-font-scale, 1));
	padding-bottom: calc(1rem * var(--pc-font-scale, 1));
	border-bottom: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid__filter-conditions-heading {
	margin: 0;
	color: var(--pc-color-on-surface-variant);
}

.pc-data-grid__add-filter {
	align-self: flex-start;
}

.pc-data-grid__filter-rules {
	display: flex;
	flex-direction: column;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-data-grid__filter-rule {
	display: grid;
	grid-template-columns: minmax(calc(10rem * var(--pc-font-scale, 1)), 0.85fr) minmax(calc(11.875rem * var(--pc-font-scale, 1)), 1fr) minmax(calc(12.5rem * var(--pc-font-scale, 1)), 1.2fr) auto;
	gap: calc(0.75rem * var(--pc-font-scale, 1));
	align-items: start;
	padding: calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-data-grid__filter-rule .pc-data-grid__filter-values {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* In a side sheet (34rem) a condition takes two rows - the field and the condition beside the remove
   button, then the value - so it never overflows the sheet. :where() keeps the base rule's
   specificity, so the phone stacking below still wins. */
:where(.pc-dialog--sidesheet) .pc-data-grid__filter-rule {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

:where(.pc-dialog--sidesheet) .pc-data-grid__filter-rule > .pc-data-grid__filter-values {
	grid-row: 2;
	grid-column: 1 / 3;
}

.pc-data-grid__filter-rule .pc-data-grid__filter-values > :only-child {
	grid-column: 1 / -1;
}

.pc-data-grid__remove-filter {
	margin-top: calc(1.5rem * var(--pc-font-scale, 1));
}

.pc-data-grid__filter-empty {
	display: flex;
	min-height: calc(7rem * var(--pc-font-scale, 1));
	flex-direction: column;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	justify-content: center;
	padding: calc(1rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-low);
	border: 1px dashed var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-medium);
	text-align: center;
}

.pc-range-slider {
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pc-range-slider > legend {
	color: var(--pc-color-on-surface);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-range-slider__values {
	display: flex;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-range-slider__controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(1rem * var(--pc-font-scale, 1));
}

.pc-range-slider__dual-control {
	position: relative;
	height: calc(3rem * var(--pc-font-scale, 1));
	margin-inline: calc(0.625rem * var(--pc-font-scale, 1));
}

.pc-range-slider__track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: calc(0.25rem * var(--pc-font-scale, 1));
	background:
		linear-gradient(
			to right,
			var(--pc-color-outline-variant) 0 var(--pc-range-start),
			var(--pc-color-primary) var(--pc-range-start) var(--pc-range-end),
			var(--pc-color-outline-variant) var(--pc-range-end) 100%
		);
	border-radius: var(--pc-shape-corner-full);
	transform: translateY(-50%);
}

.pc-range-slider__thumb {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: calc(3rem * var(--pc-font-scale, 1));
	margin: 0;
	appearance: none;
	background: transparent;
	outline: 0;
	pointer-events: none;
}

.pc-range-slider__thumb--maximum,
.pc-range-slider__thumb:focus {
	z-index: 2;
}

.pc-range-slider__thumb::-webkit-slider-runnable-track {
	height: calc(0.25rem * var(--pc-font-scale, 1));
	background: transparent;
}

.pc-range-slider__thumb::-moz-range-track {
	height: calc(0.25rem * var(--pc-font-scale, 1));
	background: transparent;
}

.pc-range-slider__thumb::-webkit-slider-thumb {
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: calc(1.25rem * var(--pc-font-scale, 1));
	margin-top: calc(-0.5rem * var(--pc-font-scale, 1));
	appearance: none;
	background: var(--pc-color-primary);
	border: 2px solid var(--pc-color-surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--pc-color-primary);
	cursor: grab;
	pointer-events: auto;
}

.pc-range-slider__thumb::-moz-range-thumb {
	width: calc(1rem * var(--pc-font-scale, 1));
	height: calc(1rem * var(--pc-font-scale, 1));
	background: var(--pc-color-primary);
	border: 2px solid var(--pc-color-surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--pc-color-primary);
	cursor: grab;
	pointer-events: auto;
}

.pc-range-slider__thumb:focus-visible::-webkit-slider-thumb {
	outline: 3px solid color-mix(in srgb, var(--pc-color-primary) 35%, transparent);
	outline-offset: 3px;
}

.pc-range-slider__thumb:focus-visible::-moz-range-thumb {
	outline: 3px solid color-mix(in srgb, var(--pc-color-primary) 35%, transparent);
	outline-offset: 3px;
}

.pc-range-slider:disabled {
	opacity: 0.38;
}

/* Vendor thumb selectors stay in separate rules: a browser drops a whole rule whose selector list
   holds a pseudo-element it does not know. */
.pc-range-slider:disabled .pc-range-slider__thumb::-webkit-slider-thumb {
	cursor: default;
}

.pc-range-slider:disabled .pc-range-slider__thumb::-moz-range-thumb {
	cursor: default;
}

/* A read-only range stays focusable and legible, but its fill and thumbs use the outline colour
   (as a read-only slider does), so it does not look editable. */
.pc-range-slider--readonly .pc-range-slider__track {
	background:
		linear-gradient(
			to right,
			var(--pc-color-outline-variant) 0 var(--pc-range-start),
			var(--pc-color-outline) var(--pc-range-start) var(--pc-range-end),
			var(--pc-color-outline-variant) var(--pc-range-end) 100%
		);
}

.pc-range-slider--readonly .pc-range-slider__thumb::-webkit-slider-thumb {
	background: var(--pc-color-outline);
	box-shadow: 0 0 0 1px var(--pc-color-outline);
	cursor: default;
}

.pc-range-slider--readonly .pc-range-slider__thumb::-moz-range-thumb {
	background: var(--pc-color-outline);
	box-shadow: 0 0 0 1px var(--pc-color-outline);
	cursor: default;
}

.pc-line-chart {
	margin: 0;
}

.pc-line-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pc-line-chart__grid-line {
	stroke: var(--pc-color-outline-variant);
	stroke-width: 1;
}

.pc-line-chart__line {
	fill: none;
	stroke: var(--pc-component-color);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pc-line-chart__point {
	fill: var(--pc-color-surface);
	stroke: var(--pc-component-color);
	stroke-width: 3;
}

.pc-line-chart figcaption {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: center;
}

.pc-sparkline {
	--pc-sparkline-color: var(--pc-chart-color, var(--pc-component-color));
	display: block;
	min-width: 0;
	margin: 0;
	color: var(--pc-color-on-surface);
}

.pc-sparkline svg {
	display: block;
	width: 100%;
	height: calc(3rem * var(--pc-font-scale, 1));
}

.pc-sparkline__line {
	fill: none;
	stroke: var(--pc-sparkline-color);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.pc-sparkline__area {
	fill: var(--pc-sparkline-color);
	opacity: 0.16;
}

.pc-sparkline__bar {
	fill: var(--pc-sparkline-color);
	stroke: transparent;
	stroke-width: 2;
	outline: none;
	vector-effect: non-scaling-stroke;
	transition:
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		stroke var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-sparkline__bar:hover {
	opacity: 0.78;
}

.pc-sparkline__bar:focus-visible {
	stroke: var(--pc-color-on-surface);
}

.pc-sparkline__end-point {
	stroke: var(--pc-sparkline-color);
	stroke-width: 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.pc-sparkline__caption {
	margin-block-start: var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-bar-chart__bar {
	background: var(--pc-chart-color, var(--pc-component-color));
}

.pc-bar-chart__item {
	padding: calc(0.25rem * var(--pc-font-scale, 1));
	border-radius: var(--pc-shape-corner-medium);
	outline: none;
	transition:
		background var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		box-shadow var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-bar-chart__item--interactive {
	cursor: pointer;
}

.pc-bar-chart__item--interactive:hover {
	background: color-mix(in srgb, var(--pc-color-primary) 8%, transparent);
}

.pc-bar-chart__item--interactive:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pc-color-primary);
}

.pc-bar-chart__item--selected {
	background: var(--pc-color-secondary-container);
}

.pc-axis-chart,
.pc-circular-chart {
	min-width: 0;
	margin: 0;
	color: var(--pc-color-on-surface);
	container-type: inline-size;
}

.pc-chart--fill-container,
.pc-circular-chart--fill-container {
	display: grid;
	height: 100%;
	min-height: 0;
	grid-template-rows: minmax(0, 1fr) auto;
}

.pc-axis-chart__layout,
.pc-circular-chart__layout {
	display: grid;
	min-width: 0;
	gap: calc(1rem * var(--pc-font-scale, 1));
	align-items: center;
}

.pc-chart--fill-container .pc-axis-chart__layout,
.pc-circular-chart--fill-container .pc-circular-chart__layout {
	height: 100%;
	min-height: 0;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: stretch;
}

.pc-chart--fill-container .pc-axis-chart__canvas,
.pc-chart--fill-container .pc-axis-chart__scroll {
	height: 100%;
	min-height: 0;
	block-size: 100%;
}

.pc-chart--legend-bottom .pc-axis-chart__layout,
.pc-chart--legend-bottom .pc-circular-chart__layout,
.pc-chart--legend-hidden .pc-axis-chart__layout,
.pc-chart--legend-hidden .pc-circular-chart__layout,
.pc-chart--legend-auto .pc-axis-chart__layout,
.pc-chart--legend-auto .pc-circular-chart__layout {
	grid-template-columns: minmax(0, 1fr);
}

.pc-chart--legend-right .pc-axis-chart__layout,
.pc-chart--legend-right .pc-circular-chart__layout {
	grid-template-columns: minmax(0, 1fr) minmax(calc(8rem * var(--pc-font-scale, 1)), auto);
}

.pc-chart--legend-left .pc-axis-chart__layout,
.pc-chart--legend-left .pc-circular-chart__layout {
	grid-template-columns: minmax(calc(8rem * var(--pc-font-scale, 1)), auto) minmax(0, 1fr);
}

.pc-chart--legend-left .pc-axis-chart__canvas,
.pc-chart--legend-left .pc-circular-chart__graphic {
	grid-row: 1;
	grid-column: 2;
}

.pc-chart--legend-left .pc-chart-legend {
	grid-row: 1;
	grid-column: 1;
}

.pc-axis-chart__canvas {
	position: relative;
	min-width: 0;
	overflow: visible;
}

.pc-axis-chart__scroll {
	min-width: 0;
	block-size: calc(19rem * var(--pc-font-scale, 1));
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
}

.pc-axis-chart svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pc-circular-chart svg {
	display: block;
	width: 100%;
	height: auto;
}

.pc-axis-chart figcaption,
.pc-circular-chart figcaption {
	margin-top: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: center;
}

.pc-axis-chart__grid-line {
	stroke: var(--pc-color-outline-variant);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.pc-axis-chart__axis-mark {
	stroke: var(--pc-color-outline);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.pc-axis-chart__tick,
.pc-axis-chart__category-label,
.pc-axis-chart__empty-label,
.pc-circular-chart__empty-label {
	fill: var(--pc-color-on-surface-variant);
	font-family: var(--pc-typescale-font-family);
}

.pc-axis-chart__tick,
.pc-axis-chart__category-label {
	font-size: calc(0.625rem * var(--pc-font-scale, 1));
}

.pc-axis-chart__empty-label,
.pc-circular-chart__empty-label {
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-axis-chart__bar {
	fill: var(--pc-chart-color, var(--pc-component-color));
	outline: none;
	transition:
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		filter var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-axis-chart__bar:hover,
.pc-axis-chart__bar:focus-visible {
	filter: brightness(1.08);
	opacity: 0.9;
}

.pc-axis-chart__bar:focus-visible,
.pc-time-series-chart__point:focus-visible,
.pc-circular-chart__segment:focus-visible {
	stroke: var(--pc-color-on-surface);
	stroke-width: 2;
}

.pc-chart-legend {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	gap: calc(0.5rem * var(--pc-font-scale, 1)) calc(1rem * var(--pc-font-scale, 1));
	list-style: none;
}

.pc-chart--legend-right .pc-chart-legend,
.pc-chart--legend-left .pc-chart-legend {
	max-width: calc(14rem * var(--pc-font-scale, 1));
	flex-direction: column;
	align-self: center;
}

.pc-chart--fill-container.pc-chart--legend-left .pc-chart-legend,
.pc-chart--fill-container.pc-chart--legend-right .pc-chart-legend,
.pc-circular-chart--fill-container.pc-chart--legend-left .pc-chart-legend,
.pc-circular-chart--fill-container.pc-chart--legend-right .pc-chart-legend {
	flex-wrap: nowrap;
	min-height: 0;
	box-sizing: border-box;
	max-block-size: 100%;
	padding: 4px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pc-chart-legend li {
	display: grid;
	min-width: 0;
	grid-template-columns: calc(0.75rem * var(--pc-font-scale, 1)) minmax(0, 1fr) auto;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	align-items: center;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-chart-legend__toggle {
	display: grid;
	width: 100%;
	min-width: 0;
	padding: calc(0.25rem * var(--pc-font-scale, 1));
	grid-column: 1 / -1;
	grid-template-columns: calc(0.75rem * var(--pc-font-scale, 1)) minmax(0, 1fr) auto;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	align-items: center;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.pc-chart-legend__toggle:hover {
	background: color-mix(in srgb, var(--pc-color-on-surface) 8%, transparent);
}

.pc-chart-legend__toggle:focus-visible {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-chart-legend__item--hidden .pc-chart-legend__swatch {
	background: transparent;
	border: 2px solid var(--pc-chart-color, var(--pc-component-color));
	opacity: 0.65;
}

.pc-chart-legend__item--hidden .pc-chart-legend__label {
	opacity: 0.65;
	text-decoration: line-through;
}

.pc-chart-legend__item--hidden .pc-chart-legend__value {
	opacity: 0.65;
}

.pc-chart-legend__swatch {
	width: calc(0.75rem * var(--pc-font-scale, 1));
	height: calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-chart-color, var(--pc-component-color));
	border-radius: var(--pc-shape-corner-full);
}

.pc-chart-legend__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-chart-legend__value {
	color: var(--pc-color-on-surface);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.pc-chart-tooltip {
	position: absolute;
	z-index: 4;
	top: var(--pc-chart-tooltip-y);
	left: var(--pc-chart-tooltip-x);
	display: grid;
	max-width: min(calc(22rem * var(--pc-font-scale, 1)), calc(100vw - 2rem));
	padding: calc(0.5rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	gap: calc(0.125rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-tooltip-container);
	background: var(--pc-color-tooltip-container);
	border: 1px solid color-mix(in srgb, var(--pc-color-on-tooltip-container) 20%, transparent);
	border-radius: var(--pc-shape-corner-medium);
	box-shadow: var(--pc-elevation-level-2);
	font-family: var(--pc-typescale-font-family);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	transform: translate(-50%, calc(-100% - 0.5rem));
	pointer-events: none;
}

.pc-chart-tooltip strong {
	font-weight: 700;
}

.pc-chart-tooltip--start {
	transform: translate(0, calc(-100% - 0.5rem));
}

.pc-chart-tooltip--end {
	transform: translate(-100%, calc(-100% - 0.5rem));
}

.pc-chart-tooltip-layer {
	position: absolute;
	z-index: 4;
	top: 0;
	left: calc(-1 * var(--pc-chart-scroll-left, 0px));
	width: var(--pc-chart-content-width, 100%);
	height: var(--pc-chart-content-height, 100%);
	overflow: visible;
	pointer-events: none;
}

.pc-circular-chart__graphic {
	position: relative;
	width: min(100%, calc(18rem * var(--pc-font-scale, 1)));
	margin-inline: auto;
	overflow: visible;
}

.pc-circular-chart--fill-container .pc-circular-chart__graphic {
	width: 100%;
	height: 100%;
	min-height: 0;
}

.pc-circular-chart--fill-container .pc-circular-chart__graphic svg {
	height: 100%;
}

.pc-circular-chart__segment {
	fill: var(--pc-chart-color, var(--pc-component-color));
	stroke: var(--pc-color-surface);
	stroke-width: var(--pc-chart-separator-width, 0);
	vector-effect: non-scaling-stroke;
	outline: none;
	transition:
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		filter var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		stroke-width var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-circular-chart__segment:hover,
.pc-circular-chart__segment:focus-visible {
	filter: brightness(1.08);
	opacity: 0.92;
}

.pc-circular-chart__segment--selected {
	stroke: var(--pc-color-on-surface);
	stroke-width: 4;
}

.pc-circular-chart__empty-ring {
	fill: var(--pc-color-surface-container-high);
	stroke: var(--pc-color-outline-variant);
	stroke-width: 1;
}

.pc-circular-chart--donut .pc-circular-chart__empty-ring {
	fill: none;
	stroke-width: 24;
}

.pc-circular-chart__center {
	position: absolute;
	inset: 50% auto auto 50%;
	display: grid;
	width: 42%;
	aspect-ratio: 1;
	place-items: center;
	color: var(--pc-color-on-surface);
	font-size: calc(1.25rem * var(--pc-font-scale, 1));
	font-weight: 600;
	text-align: center;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pc-time-series-chart__scroll {
	overflow: hidden;
}

.pc-time-series-chart .pc-axis-chart__tick,
.pc-time-series-chart .pc-axis-chart__category-label {
	font-size: calc(1.125rem * var(--pc-font-scale, 1));
}

.pc-time-series-chart .pc-axis-chart__empty-label {
	font-size: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-time-series-chart__line {
	fill: none;
	stroke: var(--pc-chart-color, var(--pc-component-color));
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.pc-time-series-chart__area {
	fill: color-mix(in srgb, var(--pc-chart-color, var(--pc-component-color)) 24%, transparent);
	stroke: none;
}

.pc-time-series-chart--stacked .pc-time-series-chart__area {
	fill: color-mix(
		in srgb,
		var(--pc-chart-color, var(--pc-component-color)) 76%,
		var(--pc-color-surface));
}

.pc-time-series-chart--stacked .pc-time-series-chart__line {
	stroke-width: 2;
}

.pc-time-series-chart__point {
	fill: transparent;
	stroke: transparent;
	stroke-width: 0;
	outline: none;
	pointer-events: all;
}

.pc-time-series-chart__marker {
	fill: var(--pc-color-surface);
	stroke: var(--pc-chart-color, var(--pc-component-color));
	stroke-width: 2;
	outline: none;
	pointer-events: none;
	transition:
		fill var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		r var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-time-series-chart__point--hidden {
	pointer-events: all;
}

.pc-time-series-chart__marker--hidden {
	opacity: 0;
}

.pc-time-series-chart__point:hover + .pc-time-series-chart__marker,
.pc-time-series-chart__point:focus-visible + .pc-time-series-chart__marker {
	fill: var(--pc-chart-color, var(--pc-component-color));
	stroke: var(--pc-color-surface);
	stroke-width: 2;
	opacity: 1;
	r: 5px;
}

.pc-category-line-chart__line {
	fill: none;
	stroke: var(--pc-chart-color, var(--pc-component-color));
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.pc-category-line-chart__area {
	fill: color-mix(in srgb, var(--pc-chart-color, var(--pc-component-color)) 24%, transparent);
	stroke: none;
}

.pc-category-line-chart__point {
	fill: transparent;
	stroke: transparent;
	stroke-width: 0;
	outline: none;
	pointer-events: all;
}

.pc-category-line-chart__point:focus-visible {
	stroke: var(--pc-color-on-surface);
	stroke-width: 2;
}

.pc-category-line-chart__marker {
	fill: var(--pc-color-surface);
	stroke: var(--pc-chart-color, var(--pc-component-color));
	stroke-width: 2;
	pointer-events: none;
	transition:
		fill var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		opacity var(--pc-motion-duration-short) var(--pc-motion-easing-standard),
		r var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-category-line-chart__marker--hidden {
	opacity: 0;
}

.pc-category-line-chart__point:hover + .pc-category-line-chart__marker,
.pc-category-line-chart__point:focus-visible + .pc-category-line-chart__marker {
	fill: var(--pc-chart-color, var(--pc-component-color));
	stroke: var(--pc-color-surface);
	opacity: 1;
	r: 5px;
}

.pc-axis-bar-chart__selection {
	fill: var(--pc-color-secondary-container);
	pointer-events: none;
}

.pc-axis-bar-chart .pc-axis-chart__bar[aria-pressed="true"] {
	stroke: var(--pc-color-on-surface);
	stroke-width: 2;
}

@container (min-width: 38rem) {
	.pc-chart--legend-auto .pc-axis-chart__layout,
	.pc-chart--legend-auto .pc-circular-chart__layout {
		grid-template-columns: minmax(0, 1fr) minmax(calc(8rem * var(--pc-font-scale, 1)), auto);
	}

	.pc-chart--legend-auto .pc-chart-legend {
		max-width: calc(14rem * var(--pc-font-scale, 1));
		flex-direction: column;
		align-self: center;
	}

	.pc-chart--fill-container.pc-chart--legend-auto .pc-chart-legend,
	.pc-circular-chart--fill-container.pc-chart--legend-auto .pc-chart-legend {
		flex-wrap: nowrap;
		min-height: 0;
		box-sizing: border-box;
		max-block-size: 100%;
		padding: 4px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@container (max-width: 30rem) {
	.pc-chart--legend-right .pc-axis-chart__layout,
	.pc-chart--legend-right .pc-circular-chart__layout,
	.pc-chart--legend-left .pc-axis-chart__layout,
	.pc-chart--legend-left .pc-circular-chart__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-chart--legend-left .pc-axis-chart__canvas,
	.pc-chart--legend-left .pc-circular-chart__graphic,
	.pc-chart--legend-left .pc-chart-legend {
		grid-row: auto;
		grid-column: 1;
	}

	.pc-chart--legend-right .pc-chart-legend,
	.pc-chart--legend-left .pc-chart-legend {
		max-width: none;
		flex-direction: row;
	}

	.pc-chart--fill-container.pc-chart--legend-left .pc-chart-legend,
	.pc-chart--fill-container.pc-chart--legend-right .pc-chart-legend,
	.pc-circular-chart--fill-container.pc-chart--legend-left .pc-chart-legend,
	.pc-circular-chart--fill-container.pc-chart--legend-right .pc-chart-legend {
		flex-wrap: wrap;
	}
}

.pc-barcode {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	margin: 0;
	padding: calc(0.75rem * var(--pc-font-scale, 1));
	overflow-x: auto;
	background: white;
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-barcode svg {
	display: block;
	width: 100%;
	max-height: calc(8.75rem * var(--pc-font-scale, 1));
}

.pc-barcode__text {
	color: #000;
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	letter-spacing: 0.08em;
	text-align: center;
}

.pc-qr-code {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	margin: 0;
	padding: calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-qr-code svg {
	display: block;
	width: min(100%, var(--pc-qr-size));
	height: auto;
	aspect-ratio: 1;
}

.pc-qr-code__caption {
	max-width: var(--pc-qr-size);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: calc(1.25rem * var(--pc-font-scale, 1));
	overflow-wrap: anywhere;
	text-align: center;
}

.pc-qr-code--empty svg {
	outline: 1px dashed var(--pc-color-outline);
	outline-offset: -1px;
}

@media (max-width: 43.75rem) {
	.pc-multi-select__surface {
		right: auto;
		left: 0;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.pc-color-picker__surface {
		right: auto;
		left: 0;
		width: 100%;
		max-width: 100%;
	}

	.pc-color-picker__values {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pc-color-picker__hex-field {
		grid-column: 1 / -1;
	}

	.pc-segmented-field,
	.pc-segmented-button {
		width: 100%;
	}

	.pc-segmented-button__item {
		min-width: 0;
		flex: 1 1 0;
		padding-inline: calc(0.5rem * var(--pc-font-scale, 1));
	}

	/* An icon-only group is a compact setting, not a row-wide choice: it keeps its own width. */
	.pc-segmented-field:has(> .pc-segmented-button--icon-only),
	.pc-segmented-button--icon-only {
		width: auto;
	}

	.pc-segmented-button--icon-only .pc-segmented-button__item {
		min-width: var(--pc-density-control-medium);
		flex: 0 0 auto;
	}

	.pc-data-grid__filter-rule {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.pc-data-grid__filter-rule > .pc-field,
	.pc-data-grid__filter-rule > .pc-data-grid__filter-values {
		grid-row: auto;
		grid-column: 1;
	}

	.pc-data-grid__filter-rule > .pc-data-grid__remove-filter {
		grid-row: 1;
		grid-column: 2;
		margin-top: calc(1.5rem * var(--pc-font-scale, 1));
	}

	.pc-range-slider__controls {
		grid-template-columns: 1fr;
	}
}

/* data grid: list view
 *
 * The phone list's container rules exist twice, generated from one source so they cannot drift:
 * once for the forced Mobile layout (.pc-data-grid--mobile) and once inside the list-view query,
 * which must equal PlatformDataGridBreakpoints.CompactQuery (narrow viewports and landscape phones).
 * Both copies have the same specificity.
 */
.pc-data-grid--mobile {
	--pc-data-grid-mobile-toolbar-height: calc(var(--pc-density-space-sm) * 3 + 3rem * var(--pc-font-scale, 1) + var(--pc-density-control-large));
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
	/* The end space follows the whole list, pager included (the root is border-box), so a floating
	   action button over the bottom corner never covers the last item or the pager. */
	padding-block-end: var(--pc-data-grid-mobile-end-space, 0);
}

.pc-data-grid--mobile:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar--untitled),
.pc-data-grid--mobile:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar--no-search),
.pc-data-grid--mobile:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar--selection:not(.pc-data-grid__toolbar--selection-query)) {
	--pc-data-grid-mobile-toolbar-height: calc(var(--pc-density-space-sm) * 2 + 3rem * var(--pc-font-scale, 1));
}

.pc-data-grid--mobile:not(:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar)) {
	--pc-data-grid-mobile-toolbar-height: 0px;
}

/* The toolbar container is a desktop device: without a box of its own the toolbar is a direct
   child of the grid again, so its sticky position follows the page scroll. */
.pc-data-grid--mobile .pc-data-grid__toolbar-container {
	display: contents;
	container-type: normal;
}

.pc-data-grid--mobile .pc-data-grid__column-customisation--desktop {
	display: none;
}

.pc-data-grid--mobile .pc-data-grid__mobile-field-customisation {
	display: flex;
}

.pc-data-grid--mobile .pc-data-grid__customise-action--desktop-only {
	display: none;
}

.pc-data-grid--mobile .pc-data-grid__customise-reset--table {
	display: none;
}

.pc-data-grid--mobile .pc-data-grid__customise-reset--list {
	display: inline-flex;
}

.pc-data-grid--mobile .pc-data-grid__customise-action--mobile-only,
.pc-data-grid--mobile .pc-data-grid__select-action {
	display: inline-flex;
}

/* Toolbar: row 1 is the title and up to three icon actions, row 2 the full-width search. It stays
   reachable while the list scrolls under it with the page. */
.pc-data-grid--mobile .pc-data-grid__toolbar {
	position: sticky;
	z-index: 2;
	top: var(--pc-data-grid-mobile-sticky-top, 0);
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--pc-density-space-sm) var(--pc-density-space-xs);
	padding: var(--pc-density-space-sm) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	background: var(--pc-color-surface);
}

.pc-data-grid--mobile .pc-data-grid__heading {
	min-height: calc(3rem * var(--pc-font-scale, 1));
	grid-row: 1;
	grid-column: 1;
	justify-content: center;
}

.pc-data-grid--mobile .pc-data-grid__heading > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid--mobile .pc-data-grid__search {
	grid-row: 2;
	grid-column: 1 / -1;
	min-width: 0;
}

.pc-data-grid--mobile .pc-data-grid__header-actions {
	grid-row: 1;
	grid-column: 2;
	flex-wrap: nowrap;
	justify-self: end;
}

.pc-data-grid--mobile .pc-data-grid__view-actions {
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
}

.pc-data-grid--mobile .pc-data-grid__toolbar--untitled .pc-data-grid__search {
	grid-row: 1;
	grid-column: 1;
}

.pc-data-grid--mobile .pc-data-grid__toolbar--selection {
	display: block;
	padding-inline: var(--pc-density-space-xs) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
}

.pc-data-grid--mobile .pc-data-grid__filters {
	padding: 0 var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) var(--pc-density-space-sm);
	border-bottom: 0;
}

/* The list scrolls with the page: no inner scroller and no height cap, except for virtualized
   lists, which need a bounded viewport. */
.pc-data-grid--mobile .pc-data-grid__viewport {
	flex: var(--pc-data-grid-host-viewport-flex, 0 1 auto);
	border-top: 0;
}

.pc-data-grid--mobile.pc-data-grid--fill-container .pc-data-grid__viewport {
	flex: var(--pc-data-grid-host-viewport-flex, 1 1 0);
}

.pc-data-grid--mobile:not(.pc-data-grid--virtualized) .pc-data-grid__viewport {
	max-height: none !important;
	overflow: visible;
}

.pc-data-grid--mobile.pc-data-grid--virtualized .pc-data-grid__viewport {
	overflow-x: hidden;
	overflow-y: auto;
}

.pc-data-grid--mobile .pc-data-grid__table {
	width: auto;
	min-width: 0;
	/* The list has no divider under its last item. */
	box-shadow: none;
}

.pc-data-grid--mobile .pc-data-grid__desktop-header,
.pc-data-grid--mobile .pc-data-grid__desktop-row {
	display: none;
}

/* Flat, edge-to-edge list: items carry the inline inset, dividers separate them. */
.pc-data-grid--mobile .pc-data-grid__body {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: transparent;
}

.pc-data-grid--mobile .pc-data-grid__row-set {
	display: flex;
	width: 100%;
	min-width: 0;
	flex-direction: column;
}

.pc-data-grid--mobile .pc-data-grid__row,
.pc-data-grid--mobile .pc-data-grid__row--virtualized {
	position: relative;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pc-data-grid--mobile .pc-data-grid__row:hover {
	background: transparent;
}

.pc-data-grid--mobile .pc-data-grid__row:is([aria-selected="true"], [data-selected="true"]) {
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
}

.pc-data-grid--mobile .pc-data-grid__row-set + .pc-data-grid__row-set > .pc-data-grid__row::before {
	position: absolute;
	z-index: 1;
	top: 0;
	inset-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) 0;
	border-top: 1px solid var(--pc-color-outline-variant);
	content: "";
	pointer-events: none;
}

/* M3 inset divider: aligned with the text when the item has a leading slot. */
.pc-data-grid--mobile .pc-data-grid__row-set + .pc-data-grid__row-set > .pc-data-grid__row:has(> .pc-data-grid__mobile-row--leading)::before {
	inset-inline-start: calc(var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) + 2.5rem * var(--pc-font-scale, 1) + var(--pc-density-space-lg));
}

.pc-data-grid--mobile .pc-data-grid__mobile-row {
	position: relative;
	display: grid;
	min-height: var(--pc-density-row-height);
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: var(--pc-density-space-lg);
	align-items: center;
	padding: var(--pc-density-space-md) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent);
}

.pc-data-grid--mobile .pc-data-grid__mobile-row > .pc-data-grid__mobile-leading {
	grid-column: 1;
}

.pc-data-grid--mobile .pc-data-grid__mobile-row > .pc-data-grid__mobile-content {
	grid-column: 2;
}

.pc-data-grid--mobile .pc-data-grid__mobile-row > .pc-data-grid__mobile-actions {
	grid-column: 3;
}

.pc-data-grid--mobile .pc-data-grid__row--virtualized .pc-data-grid__mobile-row {
	min-height: 100%;
}

.pc-data-grid--mobile .pc-data-grid__mobile-row--interactive {
	cursor: pointer;
}

.pc-data-grid--mobile .pc-data-grid__mobile-row--interactive:active {
	background: color-mix(in srgb, var(--pc-color-on-surface) 10%, transparent);
}

.pc-data-grid--mobile .pc-data-grid__mobile-row:has(.pc-data-grid__mobile-link:focus-visible) {
	box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent), inset 0 0 0 2px var(--pc-color-primary);
}

.pc-data-grid--mobile .pc-data-grid__mobile-leading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

.pc-data-grid--mobile .pc-data-grid__mobile-selector .pc-choice__copy {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.pc-data-grid--mobile .pc-data-grid__mobile-content {
	min-width: 0;
	overflow: hidden;
}

.pc-data-grid--mobile .pc-data-grid__mobile-edit-fields {
	display: grid;
	gap: var(--pc-density-space-md);
}

.pc-data-grid--mobile .pc-data-grid__mobile-edit-field {
	display: grid;
	min-width: 0;
	gap: var(--pc-density-space-xs);
}

.pc-data-grid--mobile .pc-data-grid__mobile-edit-label {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-data-grid--mobile .pc-data-grid__mobile-actions {
	display: flex;
	align-items: center;
}

/* Expanded detail content sits under its item, inset to the text start. */
.pc-data-grid--mobile .pc-data-grid__detail-row {
	display: block;
	width: 100%;
	min-width: 0;
	background: transparent;
}

.pc-data-grid--mobile .pc-data-grid__detail-cell {
	padding: var(--pc-density-space-md) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	background: var(--pc-color-surface-container-low);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pc-data-grid--mobile .pc-data-grid__group-row,
.pc-data-grid--mobile .pc-data-grid__after-rows {
	display: block;
	width: 100%;
	min-width: 0;
}

.pc-data-grid--mobile .pc-data-grid__after-rows {
	background: transparent;
}

.pc-data-grid--mobile .pc-data-grid__group-cell {
	padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
}

.pc-data-grid--mobile .pc-data-grid__after-rows-cell {
	padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	border-top: 0;
}

/* Group headers stick under the sticky toolbar while their rows scroll. */
.pc-data-grid--mobile .pc-data-grid__mobile-group-header {
	position: sticky;
	z-index: 1;
	top: calc(var(--pc-data-grid-mobile-sticky-top, 0px) + var(--pc-data-grid-mobile-toolbar-height, 0px));
	padding: var(--pc-density-space-xs) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container);
}

.pc-data-grid--mobile.pc-data-grid--virtualized .pc-data-grid__mobile-group-header {
	position: static;
}

.pc-data-grid--mobile .pc-data-grid__footer {
	padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	border-top: 0;
}

.pc-data-grid--mobile .pc-data-grid__page-size {
	display: none;
}

@media (max-width: 43.75rem), (max-height: 30rem) and (orientation: landscape) and (pointer: coarse) {
	.pc-data-grid {
		--pc-data-grid-mobile-toolbar-height: calc(var(--pc-density-space-sm) * 3 + 3rem * var(--pc-font-scale, 1) + var(--pc-density-control-large));
		overflow: visible;
		background: transparent;
		border: 0;
		border-radius: 0;
		/* The end space follows the whole list, pager included (the root is border-box), so a floating
		   action button over the bottom corner never covers the last item or the pager. */
		padding-block-end: var(--pc-data-grid-mobile-end-space, 0);
	}

	.pc-data-grid:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar--untitled),
	.pc-data-grid:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar--no-search),
	.pc-data-grid:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar--selection:not(.pc-data-grid__toolbar--selection-query)) {
		--pc-data-grid-mobile-toolbar-height: calc(var(--pc-density-space-sm) * 2 + 3rem * var(--pc-font-scale, 1));
	}

	.pc-data-grid:not(:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar)) {
		--pc-data-grid-mobile-toolbar-height: 0px;
	}

	/* The toolbar container is a desktop device: without a box of its own the toolbar is a direct
	   child of the grid again, so its sticky position follows the page scroll. */
	.pc-data-grid .pc-data-grid__toolbar-container {
		display: contents;
		container-type: normal;
	}

	.pc-data-grid .pc-data-grid__column-customisation--desktop {
		display: none;
	}

	.pc-data-grid .pc-data-grid__mobile-field-customisation {
		display: flex;
	}

	.pc-data-grid .pc-data-grid__customise-action--desktop-only {
		display: none;
	}

	.pc-data-grid .pc-data-grid__customise-reset--table {
		display: none;
	}

	.pc-data-grid .pc-data-grid__customise-reset--list {
		display: inline-flex;
	}

	.pc-data-grid .pc-data-grid__customise-action--mobile-only,
	.pc-data-grid .pc-data-grid__select-action {
		display: inline-flex;
	}

	/* Toolbar: row 1 is the title and up to three icon actions, row 2 the full-width search. It stays
	   reachable while the list scrolls under it with the page. */
	.pc-data-grid .pc-data-grid__toolbar {
		position: sticky;
		z-index: 2;
		top: var(--pc-data-grid-mobile-sticky-top, 0);
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: var(--pc-density-space-sm) var(--pc-density-space-xs);
		padding: var(--pc-density-space-sm) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
		background: var(--pc-color-surface);
	}

	.pc-data-grid .pc-data-grid__heading {
		min-height: calc(3rem * var(--pc-font-scale, 1));
		grid-row: 1;
		grid-column: 1;
		justify-content: center;
	}

	.pc-data-grid .pc-data-grid__heading > * {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pc-data-grid .pc-data-grid__search {
		grid-row: 2;
		grid-column: 1 / -1;
		min-width: 0;
	}

	.pc-data-grid .pc-data-grid__header-actions {
		grid-row: 1;
		grid-column: 2;
		flex-wrap: nowrap;
		justify-self: end;
	}

	.pc-data-grid .pc-data-grid__view-actions {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}

	.pc-data-grid .pc-data-grid__toolbar--untitled .pc-data-grid__search {
		grid-row: 1;
		grid-column: 1;
	}

	.pc-data-grid .pc-data-grid__toolbar--selection {
		display: block;
		padding-inline: var(--pc-density-space-xs) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	}

	.pc-data-grid .pc-data-grid__filters {
		padding: 0 var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) var(--pc-density-space-sm);
		border-bottom: 0;
	}

	/* The list scrolls with the page: no inner scroller and no height cap, except for virtualized
	   lists, which need a bounded viewport. */
	.pc-data-grid .pc-data-grid__viewport {
		flex: var(--pc-data-grid-host-viewport-flex, 0 1 auto);
		border-top: 0;
	}

	.pc-data-grid.pc-data-grid--fill-container .pc-data-grid__viewport {
		flex: var(--pc-data-grid-host-viewport-flex, 1 1 0);
	}

	.pc-data-grid:not(.pc-data-grid--virtualized) .pc-data-grid__viewport {
		max-height: none !important;
		overflow: visible;
	}

	.pc-data-grid.pc-data-grid--virtualized .pc-data-grid__viewport {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.pc-data-grid .pc-data-grid__table {
		width: auto;
		min-width: 0;
		/* The list has no divider under its last item. */
		box-shadow: none;
	}

	.pc-data-grid .pc-data-grid__desktop-header,
	.pc-data-grid .pc-data-grid__desktop-row {
		display: none;
	}

	/* Flat, edge-to-edge list: items carry the inline inset, dividers separate them. */
	.pc-data-grid .pc-data-grid__body {
		display: flex;
		flex-direction: column;
		padding: 0;
		background: transparent;
	}

	.pc-data-grid .pc-data-grid__row-set {
		display: flex;
		width: 100%;
		min-width: 0;
		flex-direction: column;
	}

	.pc-data-grid .pc-data-grid__row,
	.pc-data-grid .pc-data-grid__row--virtualized {
		position: relative;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.pc-data-grid .pc-data-grid__row:hover {
		background: transparent;
	}

	.pc-data-grid .pc-data-grid__row:is([aria-selected="true"], [data-selected="true"]) {
		color: var(--pc-color-on-secondary-container);
		background: var(--pc-color-secondary-container);
	}

	.pc-data-grid .pc-data-grid__row-set + .pc-data-grid__row-set > .pc-data-grid__row::before {
		position: absolute;
		z-index: 1;
		top: 0;
		inset-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) 0;
		border-top: 1px solid var(--pc-color-outline-variant);
		content: "";
		pointer-events: none;
	}

	/* M3 inset divider: aligned with the text when the item has a leading slot. */
	.pc-data-grid .pc-data-grid__row-set + .pc-data-grid__row-set > .pc-data-grid__row:has(> .pc-data-grid__mobile-row--leading)::before {
		inset-inline-start: calc(var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) + 2.5rem * var(--pc-font-scale, 1) + var(--pc-density-space-lg));
	}

	.pc-data-grid .pc-data-grid__mobile-row {
		position: relative;
		display: grid;
		min-height: var(--pc-density-row-height);
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: var(--pc-density-space-lg);
		align-items: center;
		padding: var(--pc-density-space-md) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
		box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent);
	}

	.pc-data-grid .pc-data-grid__mobile-row > .pc-data-grid__mobile-leading {
		grid-column: 1;
	}

	.pc-data-grid .pc-data-grid__mobile-row > .pc-data-grid__mobile-content {
		grid-column: 2;
	}

	.pc-data-grid .pc-data-grid__mobile-row > .pc-data-grid__mobile-actions {
		grid-column: 3;
	}

	.pc-data-grid .pc-data-grid__row--virtualized .pc-data-grid__mobile-row {
		min-height: 100%;
	}

	.pc-data-grid .pc-data-grid__mobile-row--interactive {
		cursor: pointer;
	}

	.pc-data-grid .pc-data-grid__mobile-row--interactive:active {
		background: color-mix(in srgb, var(--pc-color-on-surface) 10%, transparent);
	}

	.pc-data-grid .pc-data-grid__mobile-row:has(.pc-data-grid__mobile-link:focus-visible) {
		box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent), inset 0 0 0 2px var(--pc-color-primary);
	}

	.pc-data-grid .pc-data-grid__mobile-leading {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--pc-density-space-xs);
	}

	.pc-data-grid .pc-data-grid__mobile-selector .pc-choice__copy {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.pc-data-grid .pc-data-grid__mobile-content {
		min-width: 0;
		overflow: hidden;
	}

	.pc-data-grid .pc-data-grid__mobile-edit-fields {
		display: grid;
		gap: var(--pc-density-space-md);
	}

	.pc-data-grid .pc-data-grid__mobile-edit-field {
		display: grid;
		min-width: 0;
		gap: var(--pc-density-space-xs);
	}

	.pc-data-grid .pc-data-grid__mobile-edit-label {
		color: var(--pc-color-on-surface-variant);
		font-size: calc(0.75rem * var(--pc-font-scale, 1));
		font-weight: 500;
	}

	.pc-data-grid .pc-data-grid__mobile-actions {
		display: flex;
		align-items: center;
	}

	/* Expanded detail content sits under its item, inset to the text start. */
	.pc-data-grid .pc-data-grid__detail-row {
		display: block;
		width: 100%;
		min-width: 0;
		background: transparent;
	}

	.pc-data-grid .pc-data-grid__detail-cell {
		padding: var(--pc-density-space-md) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
		background: var(--pc-color-surface-container-low);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.pc-data-grid .pc-data-grid__group-row,
	.pc-data-grid .pc-data-grid__after-rows {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.pc-data-grid .pc-data-grid__after-rows {
		background: transparent;
	}

	.pc-data-grid .pc-data-grid__group-cell {
		padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
	}

	.pc-data-grid .pc-data-grid__after-rows-cell {
		padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
		border-top: 0;
	}

	/* Group headers stick under the sticky toolbar while their rows scroll. */
	.pc-data-grid .pc-data-grid__mobile-group-header {
		position: sticky;
		z-index: 1;
		top: calc(var(--pc-data-grid-mobile-sticky-top, 0px) + var(--pc-data-grid-mobile-toolbar-height, 0px));
		padding: var(--pc-density-space-xs) var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
		color: var(--pc-color-on-surface);
		background: var(--pc-color-surface-container);
	}

	.pc-data-grid.pc-data-grid--virtualized .pc-data-grid__mobile-group-header {
		position: static;
	}

	.pc-data-grid .pc-data-grid__footer {
		padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg));
		border-top: 0;
	}

	.pc-data-grid .pc-data-grid__page-size {
		display: none;
	}
}

/*
 * Landscape phone (short, wide and touch, inside the list-view query): the screen has height for
 * only about two items under a two-row toolbar, so the title, the search and the actions share one
 * row. The search takes the free width; a long title gives way first. Written without the
 * orientation keyword, so the list-view query stays the only one that names it; a wide and short
 * viewport is landscape by definition.
 */
@media (max-height: 30rem) and (min-aspect-ratio: 4/3) and (pointer: coarse) {
	.pc-data-grid:has(> .pc-data-grid__toolbar-container > .pc-data-grid__toolbar:not(.pc-data-grid__toolbar--untitled, .pc-data-grid__toolbar--no-search, .pc-data-grid__toolbar--selection)) {
		--pc-data-grid-mobile-toolbar-height: calc(var(--pc-density-space-sm) * 2 + max(3rem * var(--pc-font-scale, 1), var(--pc-density-control-large)));
	}

	.pc-data-grid .pc-data-grid__toolbar:not(.pc-data-grid__toolbar--untitled, .pc-data-grid__toolbar--no-search, .pc-data-grid__toolbar--selection) {
		grid-template-columns: minmax(0, max-content) minmax(calc(12rem * var(--pc-font-scale, 1)), 1fr) auto auto;
		column-gap: var(--pc-density-space-sm);
	}

	.pc-data-grid .pc-data-grid__toolbar:not(.pc-data-grid__toolbar--untitled, .pc-data-grid__toolbar--no-search, .pc-data-grid__toolbar--selection) > .pc-data-grid__search {
		grid-row: 1;
		grid-column: 2;
	}

	.pc-data-grid .pc-data-grid__toolbar:not(.pc-data-grid__toolbar--untitled, .pc-data-grid__toolbar--no-search, .pc-data-grid__toolbar--selection) > .pc-data-grid__header-actions {
		grid-column: 3;
	}

	.pc-data-grid .pc-data-grid__toolbar:not(.pc-data-grid__toolbar--untitled, .pc-data-grid__toolbar--no-search, .pc-data-grid__toolbar--selection) > .pc-data-grid__view-actions {
		grid-column: 4;
	}
}

/*
 * Scrolled state of the list view's sticky toolbar: once the grid's top edge has passed the top of
 * its scroller (the toolbar is stuck), the toolbar takes the surface-container tone and a bottom
 * divider, so items visibly slide under it, also in dark mode where the app bar, the toolbar and
 * the page share one surface colour. A scroll-driven animation on the grid's own view timeline, so
 * it needs no script; browsers without scroll-driven animations keep the flat toolbar.
 */
@keyframes pc-data-grid-toolbar-scrolled {
	from {
		background-color: var(--pc-color-surface);
		box-shadow: inset 0 -1px 0 transparent;
	}

	to {
		background-color: var(--pc-color-surface-container);
		box-shadow: inset 0 -1px 0 var(--pc-color-outline-variant);
	}
}

@supports (animation-timeline: view()) {
	.pc-data-grid {
		view-timeline-name: --pc-data-grid-view;
		view-timeline-axis: block;
		view-timeline-inset: var(--pc-data-grid-mobile-sticky-top, 0px) 0px;
	}

	.pc-data-grid--mobile .pc-data-grid__toolbar {
		animation-name: pc-data-grid-toolbar-scrolled;
		animation-duration: auto;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: --pc-data-grid-view;
		animation-range: exit-crossing 0px exit-crossing calc(0.5rem * var(--pc-font-scale, 1));
	}

	@media (max-width: 43.75rem), (max-height: 30rem) and (orientation: landscape) and (pointer: coarse) {
		.pc-data-grid .pc-data-grid__toolbar {
			animation-name: pc-data-grid-toolbar-scrolled;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --pc-data-grid-view;
			animation-range: exit-crossing 0px exit-crossing calc(0.5rem * var(--pc-font-scale, 1));
		}
	}
}

/*
 * data grid: phone list pager
 *
 * A paged list with more than one page pins its pager to the bottom of the visible area, so the next
 * page never needs a scroll to the end. Sticky, not fixed: it sticks in whichever scroller holds the
 * list (the page's content area, a section's page, a dialog's body), rests under the last item when
 * the list's end is on screen, and, being in the flow, never covers the last item. The class is only
 * rendered in the list view, so these rules need no media query; they follow the list view's own
 * footer rules (same specificity) so they win. The list's end space (--pc-data-grid-mobile-end-space)
 * still follows the pager. --pc-data-grid-mobile-pager-end-clearance keeps the next button clear of a
 * floating button over the bottom end corner; the bottom safe-area inset is padding, so the controls
 * sit above it.
 */
.pc-data-grid .pc-data-grid__footer--list-pager {
	position: sticky;
	z-index: 2;
	bottom: 0;
	min-height: 0;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0;
	padding-block: var(--pc-density-space-xs) calc(var(--pc-density-space-xs) + env(safe-area-inset-bottom, 0px));
	padding-inline: var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) calc(var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) + var(--pc-data-grid-mobile-pager-end-clearance, 0px));
	background-color: var(--pc-color-surface-container);
	border-top: 0;
	box-shadow: inset 0 1px 0 var(--pc-color-outline-variant);
}

/*
 * A browser counts an element as visible when it is inside the scrollport, even under a sticky
 * element, so keyboard focus moving down the list could land on an item (or a control in it) hidden
 * by the pinned pager (WCAG 2.4.11 Focus Not Obscured). While the pager is shown, items and their
 * controls keep the pager's height clear below them when focus scrolls them into view: the large
 * step button, the pager's block padding and the bottom safe-area inset.
 */
.pc-data-grid:has(.pc-data-grid__footer--list-pager) :is(
	.pc-data-grid__row,
	.pc-data-grid__row :is(a[href], button, input, select, textarea, [tabindex])
) {
	scroll-margin-block-end: calc(var(--pc-density-control-large) + 2 * var(--pc-density-space-xs) + env(safe-area-inset-bottom, 0px));
}

.pc-data-grid__list-pager {
	display: flex;
	width: 100%;
	max-width: calc(24rem * var(--pc-font-scale, 1));
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-sm);
}

.pc-data-grid__list-pager-step {
	flex: none;
}

.pc-data-grid__list-pager-range {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * While items scroll under the pinned pager it takes the surface-container tone and a top divider;
 * resting under the last item it is flat. The grid's view timeline again: the pager stops sticking
 * when the grid's end, less its end space, reaches the scroller's end. Browsers without
 * scroll-driven animations always show the divider.
 */
@keyframes pc-data-grid-pager-resting {
	from {
		background-color: var(--pc-color-surface-container);
		box-shadow: inset 0 1px 0 var(--pc-color-outline-variant);
	}

	to {
		background-color: var(--pc-color-surface);
		box-shadow: inset 0 1px 0 transparent;
	}
}

@supports (animation-timeline: view()) {
	.pc-data-grid .pc-data-grid__footer--list-pager {
		animation-name: pc-data-grid-pager-resting;
		animation-duration: auto;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: --pc-data-grid-view;
		animation-range:
			entry-crossing calc(100% - var(--pc-data-grid-mobile-end-space, 0px) - 0.5rem * var(--pc-font-scale, 1))
			entry-crossing calc(100% - var(--pc-data-grid-mobile-end-space, 0px));
	}
}

/* The Customise list sheet's Items per page choice. */
.pc-data-grid__list-page-size .pc-segmented-field {
	width: 100%;
}

/* data grid: mobile list item
 *
 * The built-in list item composed from the columns' mobile roles (PlatformDataGridMobileItem).
 * The item only renders inside the list view (its row is hidden in the table), so these rules need
 * no media query: they serve the compact query and the forced Mobile layout alike. Every selector
 * starts with .pc-data-grid so it outranks the list view's generic row rules above.
 */
.pc-data-grid .pc-data-grid__mobile-row--composed {
	grid-template-columns: minmax(0, 1fr);
}

.pc-data-grid .pc-data-grid__mobile-row--composed.pc-data-grid__mobile-row--leading {
	grid-template-columns: auto minmax(0, 1fr);
}

.pc-data-grid .pc-data-grid__mobile-row--composed > .pc-data-grid__mobile-content {
	grid-column: -2 / -1;
}

/* One-, two- and three-line items: 56, 72 and 88px at the default density. */
.pc-data-grid .pc-data-grid__mobile-row--lines-2 {
	min-height: calc(var(--pc-density-row-height) + 1rem * var(--pc-font-scale, 1));
}

.pc-data-grid .pc-data-grid__mobile-row--lines-3 {
	min-height: calc(var(--pc-density-row-height) + 2rem * var(--pc-font-scale, 1));
}

.pc-data-grid .pc-data-grid__mobile-row--composed > .pc-data-grid__mobile-leading {
	position: relative;
	display: grid;
	align-self: start;
	place-items: center;
}

.pc-data-grid .pc-data-grid__mobile-row--lines-1 > .pc-data-grid__mobile-leading {
	align-self: center;
}

.pc-data-grid .pc-data-grid__mobile-leading[data-variant="control"],
.pc-data-grid .pc-data-grid__mobile-leading[data-variant="checkbox"] {
	z-index: 1;
	min-width: calc(3rem * var(--pc-font-scale, 1));
	min-height: calc(3rem * var(--pc-font-scale, 1));
	margin: calc(-0.25rem * var(--pc-font-scale, 1));
}

.pc-data-grid .pc-data-grid__mobile-avatar {
	display: inline-grid;
	overflow: hidden;
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	flex: 0 0 auto;
	place-items: center;
	color: var(--pc-color-on-secondary-container);
	background: var(--pc-color-secondary-container);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(1rem * var(--pc-font-scale, 1));
	font-weight: 500;
	line-height: 1;
}

.pc-data-grid .pc-data-grid__mobile-avatar img,
.pc-data-grid .pc-data-grid__mobile-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-data-grid .pc-data-grid__mobile-avatar--checked {
	color: var(--pc-color-on-primary);
	background: var(--pc-color-primary);
}

.pc-data-grid .pc-data-grid__mobile-image {
	display: block;
	overflow: hidden;
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container);
	border-radius: var(--pc-shape-corner-extra-small);
}

.pc-data-grid [data-variant="wide-image"] .pc-data-grid__mobile-image {
	width: calc(4rem * var(--pc-font-scale, 1));
	height: calc(3rem * var(--pc-font-scale, 1));
}

.pc-data-grid [data-variant="wide-image"] .pc-data-grid__mobile-image img {
	object-fit: contain;
}

/* In selection mode the leading visual is the checkbox: the hit area is 48px around the 40px visual. */
.pc-data-grid .pc-data-grid__mobile-select {
	position: relative;
	z-index: 1;
	display: inline-grid;
	min-width: calc(3rem * var(--pc-font-scale, 1));
	min-height: calc(3rem * var(--pc-font-scale, 1));
	margin: calc(-0.25rem * var(--pc-font-scale, 1));
	place-items: center;
	cursor: pointer;
}

.pc-data-grid .pc-data-grid__mobile-select-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pc-data-grid .pc-data-grid__mobile-select-input:focus-visible + * {
	outline: 2px solid var(--pc-color-primary);
	outline-offset: 2px;
}

/* Headline row: the headline keeps at least half the content width; the trailing parts get the
   rest, in two columns (the time or status text, then one icon button). Further trailing parts move
   to the end of the second line. The trailing wrapper is display: contents, so its children keep
   the reading order in the DOM (time, status, actions, detail toggle) while the grid places them. */
.pc-data-grid .pc-data-grid__mobile-row--composed .pc-data-grid__mobile-content {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(50%, 1fr) auto auto;
	column-gap: 0;
	align-items: center;
	overflow: visible;
	container-type: inline-size;
}

.pc-data-grid .pc-data-grid__mobile-trailing {
	display: contents;
}

.pc-data-grid .pc-data-grid__mobile-trailing > * {
	position: relative;
	z-index: 1;
	min-width: 0;
	max-width: 100%;
	grid-row: 1;
	justify-self: end;
	margin-inline-start: var(--pc-density-space-sm);
}

.pc-data-grid .pc-data-grid__mobile-trailing > .pc-data-grid__mobile-trailing-second {
	grid-row: 2;
}

.pc-data-grid .pc-data-grid__mobile-trailing > :is(.pc-data-grid__mobile-time, .pc-data-grid__mobile-status) {
	grid-column: 2;
}

/* Trailing icon buttons keep their 48px touch target, but their wrapper is exactly one line box
   tall (24px on the headline row, 20px on the second line) and the button overflows it evenly
   into the item's padding, so a button never makes a line taller (Material list items). The
   optical end offset never reaches past the item's own inline padding: a host that sets the
   inset to 0 (a list inside a section's paper) would otherwise overflow it. */
.pc-data-grid .pc-data-grid__mobile-trailing > :is(.pc-data-grid__mobile-actions, .pc-data-grid__mobile-toggle) {
	display: flex;
	height: calc(1.5rem * var(--pc-font-scale, 1));
	grid-column: 3;
	align-items: center;
	justify-content: flex-end;
	margin-inline-end: calc(-1 * min(0.5rem * var(--pc-font-scale, 1), var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg))));
}

/* The trailing button is always a whole 48px target: the time or status column gives way, never
   the button. (An item shows one trailing button; a contact action beside an inline command moves
   both into the overflow menu.) */
.pc-data-grid .pc-data-grid__mobile-trailing > .pc-data-grid__mobile-actions {
	min-width: max-content;
}

.pc-data-grid .pc-data-grid__mobile-actions :is(.pc-icon-button, .pc-data-grid__row-actions) {
	flex: 0 0 auto;
}

.pc-data-grid .pc-data-grid__mobile-trailing > .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second {
	height: calc(1.25rem * var(--pc-font-scale, 1));
}

/* The actions button on the headline row and the detail toggle on the second line are stacked one
   line apart, so their 48px boxes overlap and the later toggle would take a tap aimed at the lower
   half of the actions icon. Each keeps its 48px box and its whole focus ring, but takes taps only on
   its own side of the line between the two rows: the box ignores the pointer and a pseudo-element
   (which hit-tests as the button) covers the button's share. */
.pc-data-grid .pc-data-grid__mobile-trailing:has(> .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second) > .pc-data-grid__mobile-actions :is(.pc-icon-button, .pc-button):not(.pc-menu__surface *),
.pc-data-grid .pc-data-grid__mobile-trailing:has(> .pc-data-grid__mobile-actions) > .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second :is(.pc-icon-button, .pc-button) {
	position: relative;
	pointer-events: none;
}

.pc-data-grid .pc-data-grid__mobile-trailing:has(> .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second) > .pc-data-grid__mobile-actions :is(.pc-icon-button, .pc-button):not(.pc-menu__surface *)::after,
.pc-data-grid .pc-data-grid__mobile-trailing:has(> .pc-data-grid__mobile-actions) > .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second :is(.pc-icon-button, .pc-button)::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	pointer-events: auto;
}

/* The headline row's button ends at the bottom of its 24px line box ... */
.pc-data-grid .pc-data-grid__mobile-trailing:has(> .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second) > .pc-data-grid__mobile-actions :is(.pc-icon-button, .pc-button):not(.pc-menu__surface *)::after {
	top: 0;
	bottom: calc(50% - 0.75rem * var(--pc-font-scale, 1));
}

/* ... and the second line's toggle starts at the top of its 20px line box. */
.pc-data-grid .pc-data-grid__mobile-trailing:has(> .pc-data-grid__mobile-actions) > .pc-data-grid__mobile-toggle.pc-data-grid__mobile-trailing-second :is(.pc-icon-button, .pc-button)::after {
	top: calc(50% - 0.625rem * var(--pc-font-scale, 1));
	bottom: 0;
}

/* A Small chip (24px) on the 20px second line overlaps the line box instead of growing it. */
.pc-data-grid .pc-data-grid__mobile-trailing > .pc-data-grid__mobile-status.pc-data-grid__mobile-trailing-second {
	margin-block: calc(-0.125rem * var(--pc-font-scale, 1));
}

.pc-data-grid .pc-data-grid__mobile-headline {
	min-width: 0;
	grid-row: 1;
	grid-column: 1;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid .pc-data-grid__mobile-link {
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* The headline link covers the whole item; controls sit above it. */
.pc-data-grid .pc-data-grid__mobile-link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.pc-data-grid .pc-data-grid__mobile-empty {
	color: var(--pc-color-on-surface-variant);
}

.pc-data-grid .pc-data-grid__mobile-supporting {
	min-width: 0;
	grid-row: 2;
	grid-column: 1 / -1;
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid .pc-data-grid__mobile-supporting--two-lines {
	display: -webkit-box;
	white-space: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow-wrap: anywhere;
}

.pc-data-grid .pc-data-grid__mobile-meta {
	display: flex;
	min-width: 0;
	grid-row: 2;
	grid-column: 1 / -1;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--pc-density-space-md);
	margin: var(--pc-density-space-xs) 0 0;
	padding: 0;
}

.pc-data-grid .pc-data-grid__mobile-meta--third-line {
	grid-row: 3;
}

.pc-data-grid .pc-data-grid__mobile-line--beside {
	grid-column: 1;
}

.pc-data-grid .pc-data-grid__mobile-fact {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	align-items: baseline;
	gap: var(--pc-density-space-xs);
}

/* A fact whose template rendered nothing is omitted like an empty value. */
.pc-data-grid .pc-data-grid__mobile-fact:has(> .pc-data-grid__mobile-fact-value:empty) {
	display: none;
}

/* Regular weight: the label is quieter than its value (the reboot's dt is bold). The label keeps
   its full width while the fact fits: only a fact wider than its line gives way, and then the
   value (its far larger shrink factor) before the label. A percentage
   cap would resolve against the fact's own shrink-to-fit width and cut a long label beside a short
   value ("Next Due…  Fri") on a line with room to spare. */
.pc-data-grid .pc-data-grid__mobile-fact-label {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 400;
	line-height: calc(1rem * var(--pc-font-scale, 1));
	letter-spacing: calc(0.025rem * var(--pc-font-scale, 1));
}

.pc-data-grid .pc-data-grid__mobile-fact-label--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* A block container, so a long value ends in an ellipsis (text-overflow does not apply to a flex
   container's text). A value made of chips or other elements lays them out in a row. */
.pc-data-grid .pc-data-grid__mobile-fact-value {
	display: block;
	flex: 0 1000 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: calc(1rem * var(--pc-font-scale, 1));
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid .pc-data-grid__mobile-fact-value:has(> :is(.pc-chip, .pc-icon, .pc-data-grid__mobile-more)) {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

.pc-data-grid .pc-data-grid__mobile-fact-value > * {
	min-width: 0;
	max-width: 100%;
}

.pc-data-grid .pc-data-grid__mobile-fact-value--muted {
	color: var(--pc-color-on-surface-variant);
	font-weight: 400;
}

.pc-data-grid .pc-data-grid__mobile-time {
	display: inline-flex;
	min-width: 0;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--pc-density-space-xs);
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	font-variant-numeric: tabular-nums;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The Time slot's label, shown only when the item has another date beside it: quieter than the
   value. The slot has at most the trailing budget, so the value gives way first (its far larger
   shrink factor) down to about two characters, and only then is the label cut. */
.pc-data-grid .pc-data-grid__mobile-time-label {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	font-weight: 400;
	text-overflow: ellipsis;
}

.pc-data-grid .pc-data-grid__mobile-time-value {
	flex: 0 1000 auto;
	min-width: min(2em, max-content);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The status takes what the trailing budget leaves it (its column, which the headline's 50% minimum
   bounds). The chip itself never takes more than 40% of the content width; a "+N" count sits beside
   it, outside that cap, so it does not shrink the chip. The chip's full text stays its accessible
   name. */
.pc-data-grid .pc-data-grid__mobile-trailing > .pc-data-grid__mobile-status {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	align-items: center;
	gap: var(--pc-density-space-xs);
}

.pc-data-grid .pc-data-grid__mobile-chip {
	min-width: 0;
	max-width: 100%;
}

.pc-data-grid .pc-data-grid__mobile-trailing > .pc-data-grid__mobile-status > .pc-data-grid__mobile-chip {
	max-width: min(100%, calc(9rem * var(--pc-font-scale, 1)));
	max-width: min(100%, 40cqi);
}

.pc-data-grid .pc-data-grid__mobile-status > .pc-data-grid__mobile-more {
	flex: 0 0 auto;
}

.pc-data-grid .pc-data-grid__mobile-chip .pc-chip__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid .pc-data-grid__mobile-metric {
	color: var(--pc-color-on-surface);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pc-data-grid .pc-data-grid__mobile-more {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
}

/* Virtualized list: every item has exactly the fixed block size, one line per text element. */
.pc-data-grid .pc-data-grid__mobile-row--fixed,
.pc-data-grid .pc-data-grid__row--virtualized > .pc-data-grid__mobile-row--fixed {
	height: var(--pc-data-grid-item-size, auto);
	min-height: 0;
	overflow: hidden;
	contain: size layout paint;
}

.pc-data-grid .pc-data-grid__mobile-row--fixed .pc-data-grid__mobile-supporting--two-lines {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.pc-data-grid .pc-data-grid__mobile-row--fixed .pc-data-grid__mobile-meta {
	flex-wrap: nowrap;
	overflow: hidden;
}

/* Selection mode: the contextual bar replaces the toolbar's first row while items are selected; the
   search (and the filter button) stay on the second row, so the user can search while selecting. */
.pc-data-grid__mobile-selection-bar {
	display: flex;
	min-height: var(--pc-density-control-large);
	align-items: center;
	gap: var(--pc-density-space-xs);
}

/* The count, and under it how many selected items the search or filters hide ("1 hidden"). */
.pc-data-grid__mobile-selection-bar .pc-data-grid__selection-summary {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
}

.pc-data-grid__mobile-selection-bar .pc-data-grid__selection-count,
.pc-data-grid__mobile-selection-bar .pc-data-grid__selection-hidden {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid__mobile-selection-bar .pc-data-grid__selection-hidden {
	color: var(--pc-color-on-surface-variant);
}

/* The second row: the search, which takes the free width, then the filter button (at the end on its own
   when the grid has no search, so the bar keeps its room for the count and the selection actions). */
.pc-data-grid__selection-query {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: var(--pc-density-space-xs);
	margin-block-start: var(--pc-density-space-sm);
	/* The bar starts at the edge for its close button; the search lines up with the list. */
	padding-inline-start: calc(var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) - var(--pc-density-space-xs));
}

.pc-data-grid__selection-query > .pc-data-grid__search {
	min-width: 0;
	flex: 1 1 auto;
}

.pc-data-grid__selection-query > .pc-data-grid__filter-badge {
	flex: 0 0 auto;
}

.pc-data-grid__mobile-selection-bar .pc-data-grid__header-actions {
	flex-wrap: nowrap;
}

.pc-data-grid__select-action {
	display: none;
}

/* List-view group header: label, count and toggle on one line; the page's content wraps below. */
.pc-data-grid__mobile-group-line {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-data-grid__mobile-group-line .pc-data-grid__group-label {
	min-width: 0;
	flex: 0 1 auto;
}

.pc-data-grid__mobile-group-line .pc-data-grid__group-toggle {
	margin-inline-start: auto;
}

.pc-data-grid__mobile-group-content {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding-block-end: var(--pc-density-space-xs);
}

/* Chips in the 16px meta row overlap the line box instead of growing it. */
.pc-data-grid .pc-data-grid__mobile-fact-value .pc-chip {
	margin-block: calc(-0.25rem * var(--pc-font-scale, 1));
}

/* Hover only where a pointer hovers: on touch screens the state would stick after a tap. */
@media (hover: hover) {
	.pc-data-grid .pc-data-grid__mobile-row--composed.pc-data-grid__mobile-row--interactive:hover {
		background: color-mix(in srgb, var(--pc-color-on-surface) 8%, transparent);
	}
}

/* A focusable item (a tap target without a link) shows the focus ring on the whole item. */
.pc-data-grid .pc-data-grid__row[tabindex]:focus-visible {
	outline: none;
}

.pc-data-grid .pc-data-grid__row[tabindex]:focus-visible > .pc-data-grid__mobile-row--composed {
	box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent), inset 0 0 0 2px var(--pc-color-primary);
}

/* Long-press selects: no text selection or link callout (iOS) under the finger. */
.pc-data-grid .pc-data-grid__row[data-list-long-press] > .pc-data-grid__mobile-row--composed {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Selected items: all text in on-secondary-container on the secondary-container fill. */
.pc-data-grid .pc-data-grid__row:is([aria-selected="true"], [data-selected="true"]) > .pc-data-grid__mobile-row--composed :is(
	.pc-data-grid__mobile-headline,
	.pc-data-grid__mobile-supporting,
	.pc-data-grid__mobile-fact-label,
	.pc-data-grid__mobile-fact-value,
	.pc-data-grid__mobile-time,
	.pc-data-grid__mobile-metric,
	.pc-data-grid__mobile-more,
	.pc-data-grid__mobile-empty) {
	color: var(--pc-color-on-secondary-container);
}

/* A tonal chip's container is close to the selected item's secondary-container fill, so on a
   selected item the chip keeps a visible container: an outline in the item's text colour. */
.pc-data-grid .pc-data-grid__row:is([aria-selected="true"], [data-selected="true"]) > .pc-data-grid__mobile-row--composed .pc-chip:is(.pc-chip--tonal, .pc-chip--selected) {
	border-color: color-mix(in srgb, var(--pc-color-on-secondary-container) 38%, transparent);
}

/* Expanded detail is inset to the text start, past the leading slot. */
.pc-data-grid .pc-data-grid__row:has(> .pc-data-grid__mobile-row--composed.pc-data-grid__mobile-row--leading) + .pc-data-grid__detail-row > .pc-data-grid__detail-cell {
	padding-inline-start: calc(var(--pc-data-grid-mobile-inset, var(--pc-density-space-lg)) + 2.5rem * var(--pc-font-scale, 1) + var(--pc-density-space-lg));
}

/* Row accent: pages colour a row through this token instead of borders (table and list). The
   first cell's edit and validation rings keep the accent beside them. */
.pc-data-grid__desktop-row > :first-child {
	box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent);
}

.pc-data-grid__desktop-row > .pc-data-grid__cell--editing:first-child:focus-within {
	box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent), inset 0 0 0 2px var(--pc-color-primary);
}

.pc-data-grid__desktop-row > .pc-data-grid__cell--invalid:first-child,
.pc-data-grid__desktop-row > .pc-data-grid__cell--invalid:first-child:focus-within {
	box-shadow: inset 3px 0 0 var(--pc-data-grid-row-accent, transparent), inset 0 0 0 2px var(--pc-color-error);
}

/* data grid: customise list
 *
 * The phone list's choices in the customise dialog (PlatformDataGridListCustomiser): a live sample
 * item pinned at the top, the item's fixed and switchable slots, the details it shows in order, and
 * the rest. The container is also .pc-data-grid__mobile-field-customisation, which the compact query
 * and the forced Mobile layout show and the table view hides, so these rules need no media query
 * except the touch one. The dialog is a full-screen sheet in the list view, so the list is hidden
 * and the sample is the only place the effect of a choice is seen.
 */
.pc-data-grid__list-customiser {
	gap: calc(1.25rem * var(--pc-font-scale, 1));
}

.pc-data-grid__list-sample {
	padding-block: calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-dialog-background, var(--pc-color-surface));
}

/* Pinned while the choices scroll under it, except on a landscape phone, where the sample would take
   most of the height: there it scrolls with the choices. */
@media (min-height: 30.0625rem) {
	.pc-data-grid__list-sample {
		position: sticky;
		z-index: 6;
		top: 0;
		box-shadow: 0 calc(0.375rem * var(--pc-font-scale, 1)) calc(0.375rem * var(--pc-font-scale, 1)) calc(-0.375rem * var(--pc-font-scale, 1)) color-mix(in srgb, var(--pc-color-on-surface) 22%, transparent);
	}
}

.pc-data-grid__list-sample > .pc-data-grid__mobile-row {
	overflow: hidden;
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

/* The shown details are separated by their insertion zones (which are also the drop targets); the
   other lists have no zones and take a gap. */
.pc-data-grid__list-slots,
.pc-data-grid__list-more {
	gap: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-data-grid__list-fixed {
	justify-content: space-between;
	padding-inline-end: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-data-grid__list-fixed-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-data-grid__list-customiser .pc-data-grid__mobile-field-lock {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	margin-inline-end: 0;
	letter-spacing: normal;
	text-transform: none;
}

/* A slot's switch fills its row: the label and the supporting text beside the switch. */
.pc-data-grid__list-slot {
	padding-block: calc(0.5rem * var(--pc-font-scale, 1));
}

.pc-data-grid__list-slot > .pc-choice {
	width: 100%;
}

.pc-data-grid__list-hint {
	display: flex;
	align-items: flex-start;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	margin: 0;
}

.pc-data-grid__list-hint > .pc-icon {
	flex: 0 0 auto;
	margin-top: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-data-grid__list-search {
	margin-block: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-data-grid__list-customiser .pc-data-grid__mobile-field-empty {
	margin-top: 0;
}

.pc-data-grid__reset-note {
	margin: 0;
	color: var(--pc-color-on-surface-variant);
}

/* The Sort menu names itself ("Sort by") and its second group ("Other fields"); the headings are
   not menu items, so the keyboard skips them. */
.pc-data-grid__sort-heading {
	padding: var(--pc-density-space-xs) var(--pc-density-space-lg) var(--pc-density-space-sm);
	color: var(--pc-color-on-surface-variant);
}

.pc-data-grid__sort-heading--group {
	padding-top: var(--pc-density-space-md);
	border-top: 1px solid var(--pc-color-outline-variant);
}

.pc-data-grid__sort-item--active {
	font-weight: 600;
}

/* Reset table and Reset list: until the view is known both exist, and the layout shows its own. */
.pc-data-grid__customise-reset--list {
	display: none;
}

@media (max-width: 37.4375rem) {
	.pc-container {
		padding-inline: calc(1rem * var(--pc-font-scale, 1));
	}

	.pc-kanban__title-row {
		flex-direction: column;
	}

	.pc-kanban__header-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.pc-kanban__board {
		grid-auto-columns: minmax(
			min(calc(16rem * var(--pc-font-scale, 1)), 80vi),
			min(calc(20rem * var(--pc-font-scale, 1)), 88vi));
		scroll-snap-type: inline mandatory;
	}

	.pc-grid-item {
		grid-column: 1 / -1;
	}

	/* The date range is left out: it stacks by the width of its own control (its container query),
	   so a phone keeps Start and End side by side when the field is wide enough. */
	.pc-date-time-range-picker__fields,
	.pc-duration-field__controls {
		grid-template-columns: 1fr;
	}

	.pc-date-time-range-picker__endpoint-field--end {
		border-top: 1px solid var(--pc-color-outline-variant);
		border-inline-start: 0;
	}

	.pc-responsive--hide-below-600 { display: none !important; }

	.pc-snackbar {
		right: calc(1rem * var(--pc-font-scale, 1));
		bottom: calc(1rem * var(--pc-font-scale, 1));
		left: calc(1rem * var(--pc-font-scale, 1));
	}

	.pc-snackbar-host,
	.pc-snackbar-host--bottom-center,
	.pc-snackbar-host--top-center,
	.pc-snackbar-host--bottom-end,
	.pc-snackbar-host--top-end {
		max-width: none;
		align-items: stretch;
		inset-inline: calc(1rem * var(--pc-font-scale, 1));
		translate: none;
	}

	.pc-snackbar-host {
		inset-block-end: calc(1rem * var(--pc-font-scale, 1));
	}

	.pc-snackbar-host--top-start,
	.pc-snackbar-host--top-center,
	.pc-snackbar-host--top-end {
		inset-block-start: calc(1rem * var(--pc-font-scale, 1));
		inset-block-end: auto;
	}

	.pc-overlay,
	.pc-dialog-backdrop {
		padding: 0;
		place-items: end center;
	}

	.pc-overlay--contained {
		padding: calc(1rem * var(--pc-font-scale, 1));
		place-items: center;
	}

	.pc-dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--pc-shape-corner-extra-large) var(--pc-shape-corner-extra-large) 0 0;
		/* A bottom sheet meets the screen edges: only its top edge keeps the hairline. */
		border-inline: 0;
		border-bottom: 0;
	}

	.pc-dialog--sidesheet,
	.pc-dialog--fullscreen {
		height: 100%;
		height: 100dvh;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	.pc-schedule__item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"time"
			"title"
			"support";
	}
}

@media (min-width: 37.5rem) {
	.pc-responsive--hide-above-600 { display: none !important; }
}

@media (max-width: 52.4375rem) {
	.pc-responsive--hide-below-840 { display: none !important; }
}

@media (min-width: 52.5rem) {
	.pc-responsive--hide-above-840 { display: none !important; }
}

@media (max-width: 74.9375rem) {
	.pc-responsive--hide-below-1200 { display: none !important; }
}

@media (min-width: 75rem) {
	.pc-responsive--hide-above-1200 { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.pc-theme *,
	.pc-theme *::before,
	.pc-theme *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/*
 * Template editor: a highlighted-overlay code editor for {{tag}} templates.
 * The highlight layer and the textarea must keep identical text metrics, so
 * token styling never adds padding or borders to inline spans.
 */
.pc-template-editor {
	display: grid;
	min-width: 0;
	gap: var(--pc-density-space-sm);
}

.pc-template-editor--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * A single-line editor splits vertically instead: side-by-side columns would
 * leave a one-row field next to a one-row preview in half the width each,
 * where the value is what needs the room. The preview sits directly beneath
 * the field, reading as the resolved form of the line above it.
 */
.pc-template-editor--split.pc-template-editor--single-line {
	grid-template-columns: minmax(0, 1fr);
}

.pc-template-editor__header,
.pc-template-editor__support {
	grid-column: 1 / -1;
}

.pc-template-editor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
	flex-wrap: wrap;
}

.pc-template-editor__header-actions {
	display: flex;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-template-editor__label {
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
}

.pc-template-editor__menu-group,
.pc-template-editor__suggestion-group {
	padding: var(--pc-density-space-xs) var(--pc-density-space-md);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	letter-spacing: calc(0.03125rem * var(--pc-font-scale, 1));
	text-transform: uppercase;
}

.pc-template-editor__surface {
	position: relative;
	display: grid;
	min-width: 0;
	background: var(--pc-field-theme-background);
	border: var(--pc-field-theme-border);
	border-radius: var(--pc-field-theme-radius);
	overflow: hidden;
}

.pc-template-editor__surface:focus-within {
	box-shadow: var(--pc-field-theme-focus-shadow);
}

.pc-template-editor--error .pc-template-editor__surface {
	box-shadow: var(--pc-field-theme-error-shadow);
}

.pc-template-editor__highlight,
.pc-template-editor__input {
	grid-area: 1 / 1;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--pc-density-space-md);
	border: 0;
	background: transparent;
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: 1.55;
	letter-spacing: normal;
	tab-size: 4;
	white-space: pre-wrap;
	word-break: break-word;
}

.pc-template-editor__highlight {
	overflow: hidden;
	color: var(--pc-code-plain);
	pointer-events: none;
	user-select: none;
}

.pc-template-editor__input {
	position: relative;
	display: block;
	color: transparent;
	caret-color: var(--pc-color-on-surface);
	resize: vertical;
	outline: none;
	overflow: auto;
}

.pc-template-editor__input::placeholder {
	color: var(--pc-color-on-surface-variant);
	opacity: 1;
}

.pc-template-editor__input::selection {
	color: transparent;
	background: color-mix(in srgb, var(--pc-color-primary) 28%, transparent);
}

.pc-template-editor--single-line .pc-template-editor__highlight,
.pc-template-editor--single-line .pc-template-editor__input {
	white-space: pre;
	overflow-x: auto;
	resize: none;
}

/* One resolved line: no scroll box, and it wraps rather than clipping. */
.pc-template-editor--single-line .pc-template-editor__preview {
	overflow: visible;
}

.pc-template-editor--single-line .pc-template-editor__preview-code {
	white-space: pre-wrap;
}

.pc-template-editor--disabled .pc-template-editor__surface {
	opacity: 0.38;
}

.pc-template-editor__token--string { color: var(--pc-code-string); }
.pc-template-editor__token--number { color: var(--pc-code-number); }
.pc-template-editor__token--keyword { color: var(--pc-code-keyword); }
.pc-template-editor__token--property { color: var(--pc-code-property); }
.pc-template-editor__token--element { color: var(--pc-code-element); }
.pc-template-editor__token--attribute { color: var(--pc-code-attribute); }
.pc-template-editor__token--punctuation { color: var(--pc-code-punctuation); }
.pc-template-editor__token--plain { color: var(--pc-code-plain); }

.pc-template-editor__token--comment {
	color: var(--pc-code-comment);
	font-style: italic;
}

/*
 * Tags render in one consistent colour across every format, bold for
 * emphasis. Bold is metric-safe here because the editor stack is monospace,
 * where bold glyphs keep the regular advance width - the overlay must never
 * drift from the textarea. The surrounding syntax still highlights from the
 * substituted samples; only the tag text itself is uniform.
 */
.pc-template-editor__tag {
	color: var(--pc-code-tag);
	background: var(--pc-code-tag-background);
	border-radius: var(--pc-shape-corner-extra-small);
	font-weight: 700;
	text-decoration: underline dotted color-mix(in srgb, var(--pc-code-tag) 55%, transparent);
	text-underline-offset: 0.14em;
}

/*
 * Validation squiggle. Text decorations never change glyph advance, so the
 * overlay stays aligned with the textarea; skip-ink is disabled so the wave
 * stays continuous under descenders and the span reads as one error range.
 */
.pc-template-editor__invalid {
	text-decoration: underline wavy var(--pc-color-error);
	text-decoration-skip-ink: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.pc-template-editor__suggestions {
	/*
	 * Viewport-fixed so no scrolling/overflow ancestor can clip the popup;
	 * the module supplies viewport coordinates. The popup recomputes on every
	 * keystroke and closes on blur, so page-scroll drift never persists.
	 */
	position: fixed;
	z-index: 30;
	min-width: calc(16rem * var(--pc-font-scale, 1));
	max-width: min(calc(24rem * var(--pc-font-scale, 1)), 90%);
	max-height: calc(15rem * var(--pc-font-scale, 1));
	overflow: auto;
	padding: var(--pc-density-space-xs);
	background: var(--pc-menu-background);
	border: var(--pc-menu-border);
	border-radius: var(--pc-menu-radius);
	box-shadow: var(--pc-elevation-level-2);
}

.pc-template-editor__suggestion {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 var(--pc-density-space-md);
	align-items: baseline;
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	border-radius: var(--pc-shape-corner-extra-small);
	cursor: pointer;
}

.pc-template-editor__suggestion:hover,
.pc-template-editor__suggestion--active {
	background: var(--pc-menu-item-hover);
}

.pc-template-editor__suggestion-label {
	overflow: hidden;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-template-editor__suggestion-token {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-template-editor__suggestion-description {
	grid-column: 1 / -1;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-template-editor__preview {
	min-width: 0;
	padding: var(--pc-density-space-md);
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-field-theme-radius);
	overflow: auto;
}

.pc-template-editor__preview-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-block-end: var(--pc-density-space-sm);
}

/*
 * The email preview is a sandboxed srcdoc iframe: styles are isolated in both
 * directions so the mail renders as a client would, not as the app themes it.
 * The document paints its own light/dark canvas; the frame only shapes it.
 */
/*
 * The module sizes this to its document, so it grows with the content like the
 * in-app preview rather than sitting at a fixed height. The minimum only
 * covers the moment before the first measurement.
 */
.pc-template-editor__preview-frame {
	display: block;
	width: 100%;
	min-height: calc(3rem * var(--pc-font-scale, 1));
	border: 0;
	border-radius: var(--pc-shape-corner-extra-small);
}

.pc-template-editor__preview-code {
	margin: 0;
	color: var(--pc-code-plain);
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.pc-template-editor__empty {
	margin: 0;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
}

.pc-template-editor__support {
	display: flex;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-template-editor__error {
	color: var(--pc-color-error);
}

.pc-template-editor__visual-wrap {
	position: relative;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	grid-template-areas:
		"toolbar"
		"link"
		"surface";
	min-width: 0;
}

.pc-template-editor__notice {
	color: var(--pc-color-on-surface-variant);
	font-style: italic;
}

/*
 * Inline link editor between the toolbar and the document: a URL field, the
 * placeholder catalogue as pickable chips, and apply/cancel. It sits in the
 * flow (not a floating popover) so it never covers the text being linked.
 */
.pc-template-editor__link-editor {
	display: grid;
	grid-area: link;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	background: var(--pc-color-surface-container-low);
	border: var(--pc-field-theme-border);
	border-bottom: 0;
}

.pc-template-editor__link-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-density-space-xs);
	max-height: calc(7rem * var(--pc-font-scale, 1));
	overflow-y: auto;
}

.pc-template-editor__link-tag {
	padding: 2px var(--pc-density-space-sm);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-small);
	background: var(--pc-color-surface);
	color: var(--pc-color-on-surface);
	cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-template-editor__link-tag:hover {
	background: var(--pc-color-surface-container-high);
}

.pc-template-editor__link-tag:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 1px;
}

.pc-template-editor__link-tag[aria-pressed="true"] {
	border-color: var(--pc-color-primary);
	background: var(--pc-color-secondary-container);
	color: var(--pc-color-on-secondary-container);
}

.pc-template-editor__link-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--pc-density-space-sm);
}

/*
 * Table context menu on the visual surface. Pointer affordance only — the
 * toolbar remains the fully keyboard-accessible path — but the menu itself
 * focuses on open so Escape and Tab behave.
 */
.pc-template-editor__context-dismiss {
	position: fixed;
	z-index: 29;
	inset: 0;
	background: transparent;
}

.pc-template-editor__context-menu {
	/* Fixed for the same clipping-immunity reasons as the suggestions popup. */
	position: fixed;
	z-index: 30;
	display: flex;
	flex-direction: column;
	min-width: calc(13rem * var(--pc-font-scale, 1));
	padding: var(--pc-density-space-xs);
	background: var(--pc-menu-background);
	border: var(--pc-menu-border);
	border-radius: var(--pc-menu-radius);
	box-shadow: var(--pc-elevation-level-2);
	outline: none;
}

.pc-template-editor__context-item {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	border: 0;
	border-radius: var(--pc-shape-corner-extra-small);
	background: transparent;
	color: var(--pc-color-on-surface);
	cursor: pointer;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	text-align: start;
}

.pc-template-editor__context-item .pc-icon {
	flex: 0 0 auto;
	color: var(--pc-color-on-surface-variant);
}

.pc-template-editor__context-item:hover,
.pc-template-editor__context-item:focus-visible {
	background: var(--pc-menu-item-hover);
	outline: none;
}

.pc-template-editor__context-separator {
	height: 1px;
	margin: var(--pc-density-space-xs) var(--pc-density-space-sm);
	background: var(--pc-color-outline-variant);
}

.pc-template-editor__toolbar {
	display: flex;
	grid-area: toolbar;
	flex-wrap: wrap;
	gap: 2px;
	padding: var(--pc-density-space-xs);
	background: var(--pc-color-surface-container);
	border: var(--pc-field-theme-border);
	border-bottom: 0;
	border-radius: var(--pc-field-theme-radius) var(--pc-field-theme-radius) 0 0;
}

.pc-template-editor__tool {
	display: inline-grid;
	min-width: calc(2rem * var(--pc-font-scale, 1));
	height: calc(2rem * var(--pc-font-scale, 1));
	place-items: center;
	padding-inline: var(--pc-density-space-sm);
	border: 0;
	border-radius: var(--pc-shape-corner-extra-small);
	background: transparent;
	color: var(--pc-color-on-surface-variant);
	cursor: pointer;
	font-size: calc(0.8125rem * var(--pc-font-scale, 1));
	font-weight: 600;
	transition: background var(--pc-motion-duration-short) var(--pc-motion-easing-standard);
}

.pc-template-editor__tool:hover:not(:disabled) {
	background: var(--pc-color-surface-container-high);
	color: var(--pc-color-on-surface);
}

.pc-template-editor__tool:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 1px;
}

.pc-template-editor__tool:disabled {
	cursor: not-allowed;
	opacity: 0.38;
}

/* Remove link: the link glyph with a diagonal strike, so no extra icon is needed. */
.pc-template-editor__tool--struck {
	position: relative;
}

.pc-template-editor__tool--struck::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(1.25rem * var(--pc-font-scale, 1));
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	content: "";
	transform: translate(-50%, -50%) rotate(-45deg);
	pointer-events: none;
}

.pc-template-editor__tool-divider {
	align-self: stretch;
	width: 1px;
	margin: var(--pc-density-space-xs) 2px;
	background: var(--pc-color-outline-variant);
}

.pc-template-editor__visual {
	grid-area: surface;
	min-height: calc(12rem * var(--pc-font-scale, 1));
	padding: var(--pc-density-space-md);
	background: var(--pc-field-theme-background);
	border: var(--pc-field-theme-border);
	border-radius: 0 0 var(--pc-field-theme-radius) var(--pc-field-theme-radius);
	outline: none;
	overflow: auto;
}

/*
 * Image resize overlay. It shares the surface's grid cell, so it lines up with
 * the editable area exactly and clips there rather than floating over the
 * toolbar when the surface scrolls. The layer stays click-through: only the
 * handles take pointer events, so typing is never intercepted.
 */
.pc-template-editor__image-tools {
	position: relative;
	z-index: 2;
	grid-area: surface;
	overflow: hidden;
	pointer-events: none;
}

.pc-template-editor__image-tools[hidden] {
	display: none;
}

.pc-template-editor__image-outline {
	position: absolute;
	border: 1px solid var(--pc-color-primary);
	border-radius: 2px;
}

.pc-template-editor__image-size {
	position: absolute;
	margin-block-start: 4px;
	padding: 2px var(--pc-density-space-xs);
	background: var(--pc-color-primary);
	border-radius: var(--pc-shape-corner-extra-small);
	color: var(--pc-color-on-primary);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pc-template-editor__image-handle {
	position: absolute;
	width: calc(0.75rem * var(--pc-font-scale, 1));
	height: calc(0.75rem * var(--pc-font-scale, 1));
	padding: 0;
	border: 2px solid var(--pc-color-primary);
	border-radius: 2px;
	background: var(--pc-color-surface);
	pointer-events: auto;
	touch-action: none;
	transform: translate(-50%, -50%);
}

.pc-template-editor__image-handle:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-template-editor__image-handle--nw,
.pc-template-editor__image-handle--se {
	cursor: nwse-resize;
}

.pc-template-editor__image-handle--ne,
.pc-template-editor__image-handle--sw {
	cursor: nesw-resize;
}

.pc-template-editor__visual:focus {
	box-shadow: var(--pc-field-theme-focus-shadow);
}

/*
 * Tag painting in the rich-text surface uses the CSS Custom Highlight API:
 * the tags stay plain editable text (native selection, copy/paste and Ctrl+B
 * bolding all behave, and that bold is real exported markup), while the tint
 * is pure paint that can never leak into the template value. Highlight
 * pseudo-elements only allow paint-level properties, which is exactly the
 * constraint we want — a tag can never look like document formatting.
 */
::highlight(pc-template-tag) {
	background-color: var(--pc-code-tag-background);
	color: var(--pc-code-tag);
}

.pc-template-editor--error .pc-template-editor__visual {
	box-shadow: var(--pc-field-theme-error-shadow);
}

.pc-template-editor--disabled .pc-template-editor__visual-wrap {
	opacity: 0.38;
}

/* Themed scrollbars. scrollbar-color inherits from .pc-theme (see the theme root block);
   scrollbar-width does not inherit, hence the descendant rule. The document scrollbar sits
   outside the theme wrapper where the tokens are not defined, so it gets a mode-neutral thumb. */
.pc-theme,
.pc-theme * {
	scrollbar-width: thin;
}

/*
 * Chromium and WebKit draw arrow buttons with the standard properties above (visible on
 * Windows), and those buttons are what rounded containers clip. Where the WebKit scrollbar
 * pseudo-elements exist, use them instead: a thin rounded thumb with no buttons. A rounded
 * scroller sets --pc-scrollbar-inset to its corner radius so the thumb stops before the curve.
 * Firefox keeps the standard thin scrollbar, which has no buttons.
 */
@supports selector(::-webkit-scrollbar) {
	html:has(.pc-theme),
	.pc-theme,
	.pc-theme * {
		scrollbar-width: auto;
		scrollbar-color: auto;
	}

	html:has(.pc-theme)::-webkit-scrollbar,
	.pc-theme::-webkit-scrollbar,
	.pc-theme ::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	html:has(.pc-theme)::-webkit-scrollbar-track,
	.pc-theme::-webkit-scrollbar-track,
	.pc-theme ::-webkit-scrollbar-track {
		margin: var(--pc-scrollbar-inset, 0px);
		background: transparent;
	}

	html:has(.pc-theme)::-webkit-scrollbar-thumb,
	.pc-theme::-webkit-scrollbar-thumb,
	.pc-theme ::-webkit-scrollbar-thumb {
		min-height: 24px;
		min-width: 24px;
		background: var(--pc-scrollbar-thumb, rgb(128 128 128 / 0.45));
		background-clip: padding-box;
		border: 2px solid transparent;
		border-radius: 999px;
	}

	html:has(.pc-theme)::-webkit-scrollbar-thumb:hover,
	.pc-theme::-webkit-scrollbar-thumb:hover,
	.pc-theme ::-webkit-scrollbar-thumb:hover {
		background: var(--pc-color-on-surface-variant, rgb(128 128 128 / 0.7));
		background-clip: padding-box;
	}

	html:has(.pc-theme)::-webkit-scrollbar-button,
	.pc-theme::-webkit-scrollbar-button,
	.pc-theme ::-webkit-scrollbar-button {
		display: none;
		width: 0;
		height: 0;
	}

	html:has(.pc-theme)::-webkit-scrollbar-corner,
	.pc-theme::-webkit-scrollbar-corner,
	.pc-theme ::-webkit-scrollbar-corner {
		background: transparent;
	}
}

/*
 * Product-neutral workflow canvas. Executable transitions use the outer graph;
 * Boolean operands remain real DOM content nested inside logic containers.
 */
.pc-workflow-builder {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: calc(32rem * var(--pc-font-scale, 1));
	container-type: inline-size;
	flex-direction: column;
	overflow: hidden;
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
}

.pc-workflow-builder,
.pc-workflow-builder *,
.pc-workflow-builder *::before,
.pc-workflow-builder *::after {
	box-sizing: border-box;
}

.pc-workflow-builder--fill-container {
	height: 100%;
	min-height: 0;
}

.pc-workflow-builder__header {
	position: relative;
	z-index: 8;
	display: flex;
	min-width: 0;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-density-space-lg);
	padding: var(--pc-density-space-md) var(--pc-density-space-lg);
	background: var(--pc-color-surface-container-low);
	border-block-end: 1px solid var(--pc-color-outline-variant);
}

.pc-workflow-builder__heading {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__title-row {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-density-space-sm);
}

.pc-workflow-builder__heading h2,
.pc-workflow-builder__heading p {
	margin: 0;
}

.pc-workflow-builder__heading h2 {
	font-size: calc(1.25rem * var(--pc-font-scale, 1));
	font-weight: var(--pc-typescale-heading-weight);
	letter-spacing: var(--pc-typescale-heading-letter-spacing);
	line-height: 1.35;
}

.pc-workflow-builder__heading p {
	max-width: 76ch;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.8125rem * var(--pc-font-scale, 1));
	line-height: 1.45;
}

.pc-workflow-builder__heading .pc-workflow-builder__readiness-message {
	margin-block-start: calc(0.125rem * var(--pc-font-scale, 1));
	font-weight: 550;
}

.pc-workflow-builder__header-actions {
	display: flex;
	min-width: 0;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--pc-density-space-sm);
}

.pc-workflow-builder__view-selector {
	flex: 0 0 auto;
}

.pc-workflow-builder__readiness {
	display: inline-flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: calc(0.1875rem * var(--pc-font-scale, 1)) calc(0.625rem * var(--pc-font-scale, 1));
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.pc-workflow-builder__readiness--ready {
	color: var(--pc-color-on-success-container);
	background: var(--pc-color-success-container);
}

.pc-workflow-builder__readiness--draft {
	color: var(--pc-color-on-warning-container);
	background: var(--pc-color-warning-container);
}

.pc-workflow-builder__zoom {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--pc-density-space-xs);
	padding: var(--pc-density-space-xs);
	background: var(--pc-color-surface-container);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-full);
}

.pc-workflow-builder__zoom .pc-icon-button {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
}

.pc-workflow-builder__zoom-value {
	min-width: calc(3.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: center;
}

.pc-workflow-builder__toolbar-divider {
	width: 1px;
	height: calc(1.5rem * var(--pc-font-scale, 1));
	margin-inline: calc(0.125rem * var(--pc-font-scale, 1));
	background: var(--pc-color-outline-variant);
}

.pc-workflow-builder__canvas-shell {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.pc-workflow-builder__canvas-shell--hidden {
	display: none;
}

.pc-workflow-builder__source {
	display: flex;
	min-width: 0;
	min-height: calc(26rem * var(--pc-font-scale, 1));
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-lg);
	overflow: hidden;
	background: var(--pc-color-surface-container-lowest);
}

.pc-workflow-builder--fill-container .pc-workflow-builder__source {
	min-height: 0;
}

.pc-workflow-builder__source-heading {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-density-space-md);
}

.pc-workflow-builder__source-heading > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--pc-density-space-xs);
}

.pc-workflow-builder__source-heading strong {
	font-size: calc(1rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__source-heading > div > span {
	max-width: 76ch;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.8125rem * var(--pc-font-scale, 1));
	line-height: 1.45;
}

.pc-workflow-builder__source-status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--pc-density-space-xs);
	padding: calc(0.1875rem * var(--pc-font-scale, 1)) calc(0.625rem * var(--pc-font-scale, 1));
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 700;
	white-space: nowrap;
}

.pc-workflow-builder__source-status--valid {
	color: var(--pc-color-on-success-container);
	background: var(--pc-color-success-container);
}

.pc-workflow-builder__source-status--invalid {
	color: var(--pc-color-on-error-container);
	background: var(--pc-color-error-container);
}

.pc-workflow-builder__source-editor {
	min-width: 0;
	min-height: calc(12rem * var(--pc-font-scale, 1));
	flex: 1 1 auto;
	grid-template-rows: auto minmax(0, 1fr) auto;
	overflow: hidden;
}

.pc-workflow-builder__source-editor .pc-template-editor__surface {
	min-height: 0;
}

.pc-workflow-builder__source-editor .pc-template-editor__highlight,
.pc-workflow-builder__source-editor .pc-template-editor__input {
	height: 100%;
	resize: none;
}

.pc-workflow-builder__source-diagnostics {
	display: flex;
	max-height: calc(10rem * var(--pc-font-scale, 1));
	margin: 0;
	padding: var(--pc-density-space-sm) var(--pc-density-space-md);
	flex-direction: column;
	gap: var(--pc-density-space-xs);
	overflow: auto;
	background: var(--pc-color-surface-container-low);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
	list-style: none;
}

.pc-workflow-builder__source-diagnostic {
	display: flex;
	align-items: flex-start;
	gap: var(--pc-density-space-xs);
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: 1.45;
}

.pc-workflow-builder__source-diagnostic .pc-icon {
	flex: 0 0 auto;
	margin-block-start: calc(0.0625rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__source-diagnostic--warning {
	color: var(--pc-color-on-warning-container);
}

.pc-workflow-builder__source-diagnostic--error {
	color: var(--pc-color-error);
}

.pc-workflow-builder__source-actions {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: var(--pc-density-space-sm);
}

.pc-workflow-builder__source-actions > span {
	margin-inline-end: auto;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__link-mode {
	position: absolute;
	z-index: 18;
	inset-block-start: var(--pc-density-space-sm);
	inset-inline-start: 50%;
	display: flex;
	max-width: calc(100% - calc(2rem * var(--pc-font-scale, 1)));
	align-items: center;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-xs) var(--pc-density-space-sm) var(--pc-density-space-xs) var(--pc-density-space-md);
	color: var(--pc-color-on-primary-container);
	background: color-mix(in srgb, var(--pc-color-primary-container) 94%, transparent);
	border: 1px solid var(--pc-color-primary);
	border-radius: var(--pc-shape-corner-full);
	box-shadow: var(--pc-elevation-level-3);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 700;
	transform: translateX(-50%);
	backdrop-filter: blur(5px);
}

.pc-workflow-builder__link-mode > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-workflow-builder__link-mode .pc-icon-button {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
	flex: 0 0 auto;
}

.pc-workflow-builder__viewport {
	--pc-workflow-viewport-overscan-x: 0px;
	--pc-workflow-viewport-overscan-y: 0px;
	position: relative;
	min-width: 0;
	min-height: calc(26rem * var(--pc-font-scale, 1));
	flex: 1 1 auto;
	overflow: auto;
	overscroll-behavior: contain;
	cursor: grab;
	touch-action: pan-x pan-y;
	background-color: var(--pc-color-surface-container-lowest);
	background-image: radial-gradient(
		circle,
		color-mix(in srgb, var(--pc-color-outline) 42%, transparent) 1px,
		transparent 1.25px);
	background-position: calc(0.75rem * var(--pc-font-scale, 1)) calc(0.75rem * var(--pc-font-scale, 1));
	background-size: calc(1.5rem * var(--pc-font-scale, 1)) calc(1.5rem * var(--pc-font-scale, 1));
	scrollbar-gutter: stable;
	-webkit-user-select: none;
	user-select: none;
}

.pc-workflow-builder__viewport--panning {
	cursor: grabbing;
	user-select: none;
}

.pc-workflow-builder__viewport--moving-node,
.pc-workflow-builder__viewport--moving-node * {
	user-select: none !important;
}

.pc-workflow-builder--fill-container .pc-workflow-builder__viewport {
	min-height: 0;
}

.pc-workflow-builder__stage,
.pc-workflow-builder__scene,
.pc-workflow-builder__nodes {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
}

.pc-workflow-builder__stage {
	position: relative;
	box-sizing: content-box;
	padding: var(--pc-workflow-viewport-overscan-y) var(--pc-workflow-viewport-overscan-x);
	transition:
		width var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing),
		height var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
}

.pc-workflow-builder__scene {
	inset-block-start: var(--pc-workflow-viewport-overscan-y);
	inset-inline-start: var(--pc-workflow-viewport-overscan-x);
	transform-origin: top left;
	transition: transform var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
}

.pc-workflow-builder__connectors {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: visible;
	pointer-events: none;
}

.pc-workflow-builder__connector {
	fill: none;
	stroke: var(--pc-color-outline);
	stroke-linecap: round;
	stroke-width: 2.25;
	vector-effect: non-scaling-stroke;
}

.pc-workflow-builder__connector--pass {
	stroke: var(--pc-color-success);
}

.pc-workflow-builder__connector--fail {
	stroke: var(--pc-color-error);
	stroke-dasharray: 6 4;
}

.pc-workflow-builder__connector-marker {
	fill: var(--pc-color-outline);
}

.pc-workflow-builder__connector-marker--pass {
	fill: var(--pc-color-success);
}

.pc-workflow-builder__connector-marker--fail {
	fill: var(--pc-color-error);
}

.pc-workflow-builder__connector-label {
	position: absolute;
	z-index: 1;
	max-width: calc(9rem * var(--pc-font-scale, 1));
	padding: 0 calc(0.25rem * var(--pc-font-scale, 1));
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-lowest);
	border: 1px solid transparent;
	border-radius: var(--pc-shape-corner-small);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-overflow: ellipsis;
	transform: translate(-50%, -50%);
	user-select: none;
	white-space: nowrap;
}

button.pc-workflow-builder__connector-label {
	cursor: pointer;
}

button.pc-workflow-builder__connector-label:hover:not(:disabled),
button.pc-workflow-builder__connector-label:focus-visible {
	background: var(--pc-color-surface-container-high);
	border-color: currentColor;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pc-workflow-builder__connector-label--empty {
	color: var(--pc-color-primary);
	border-color: currentColor;
	border-style: dashed;
	font-weight: 650;
}

.pc-workflow-builder__connector-label--pass {
	color: var(--pc-color-success);
}

.pc-workflow-builder__connector-label--fail {
	color: var(--pc-color-error);
}

.pc-workflow-builder__nodes {
	z-index: 1;
	inset: 0;
	pointer-events: none;
}

.pc-workflow-builder__node {
	--pc-workflow-node-accent: var(--pc-color-primary);
	--pc-workflow-node-container: var(--pc-color-primary-container);
	--pc-workflow-node-on-container: var(--pc-color-on-primary-container);
	position: absolute;
	isolation: isolate;
	pointer-events: auto;
}

.pc-workflow-builder__node--logic {
	--pc-workflow-node-accent: var(--pc-color-tertiary);
	--pc-workflow-node-container: var(--pc-color-tertiary-container);
	--pc-workflow-node-on-container: var(--pc-color-on-tertiary-container);
}

.pc-workflow-builder__node--condition {
	--pc-workflow-node-accent: var(--pc-color-warning);
	--pc-workflow-node-container: var(--pc-color-warning-container);
	--pc-workflow-node-on-container: var(--pc-color-on-warning-container);
}

.pc-workflow-builder__node--action {
	--pc-workflow-node-accent: var(--pc-color-success);
	--pc-workflow-node-container: var(--pc-color-success-container);
	--pc-workflow-node-on-container: var(--pc-color-on-success-container);
}

.pc-workflow-builder__node--notification {
	--pc-workflow-node-accent: var(--pc-color-info);
	--pc-workflow-node-container: var(--pc-color-info-container);
	--pc-workflow-node-on-container: var(--pc-color-on-info-container);
}

.pc-workflow-builder__node--link-source .pc-workflow-builder__node-card {
	border-color: var(--pc-color-primary);
	box-shadow:
		inset 0 0 0 2px var(--pc-color-primary),
		var(--pc-elevation-level-2);
}

.pc-workflow-builder__node--link-target .pc-workflow-builder__node-card {
	border-color: var(--pc-color-primary);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--pc-color-primary) 24%, transparent),
		var(--pc-elevation-level-2);
}

.pc-workflow-builder__node--link-unavailable .pc-workflow-builder__node-card {
	opacity: 0.5;
}

.pc-workflow-builder__node--moving {
	z-index: 20;
}

.pc-workflow-builder__node--moving .pc-workflow-builder__node-card {
	border-color: var(--pc-color-primary);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--pc-color-primary) 24%, transparent),
		var(--pc-elevation-level-4);
}

.pc-workflow-builder__node-card {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	overflow: visible;
	color: var(--pc-color-on-surface);
	background: var(--pc-card-background);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
	box-shadow: var(--pc-elevation-level-1);
	transition:
		background-color var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		border-color var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		box-shadow var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing),
		transform var(--pc-motion-spatial-fast-duration) var(--pc-motion-spatial-fast-easing);
	cursor: default;
}

.pc-workflow-builder__node-summary {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	min-height: 0;
	grid-template-columns: calc(0.25rem * var(--pc-font-scale, 1)) auto minmax(0, 1fr);
	align-items: start;
	gap: var(--pc-density-space-md);
	padding: var(--pc-density-space-lg);
	padding-inline-end: calc(3rem * var(--pc-font-scale, 1));
	overflow: hidden;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: inherit;
	font: inherit;
	text-align: start;
}

button.pc-workflow-builder__node-summary {
	cursor: pointer;
}

button.pc-workflow-builder__node-summary:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-workflow-node-container) 18%, transparent);
}

button.pc-workflow-builder__node-summary--link-target {
	cursor: crosshair;
}

button.pc-workflow-builder__node-summary--link-target:hover:not(:disabled) {
	background: color-mix(in srgb, var(--pc-color-primary-container) 72%, transparent);
}

button.pc-workflow-builder__node-summary:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 3px;
}

button.pc-workflow-builder__node-summary:disabled {
	cursor: progress;
}

.pc-workflow-builder--repositionable .pc-workflow-builder__node-card,
.pc-workflow-builder--repositionable button.pc-workflow-builder__node-summary {
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.pc-workflow-builder--repositionable .pc-workflow-builder__node--moving,
.pc-workflow-builder--repositionable .pc-workflow-builder__node--moving .pc-workflow-builder__node-card,
.pc-workflow-builder--repositionable .pc-workflow-builder__node--moving button.pc-workflow-builder__node-summary {
	cursor: grabbing;
}

.pc-workflow-builder__node--logic .pc-workflow-builder__node-summary {
	height: 108px;
	min-height: 108px;
	grid-template-columns: calc(0.25rem * var(--pc-font-scale, 1)) minmax(0, 1fr);
	flex: 0 0 108px;
	border-block-end: 1px solid var(--pc-color-outline-variant);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.pc-workflow-builder__node--linked-logic .pc-workflow-builder__node-summary {
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
	border-block-end: 0;
	border-radius: inherit;
}

.pc-workflow-builder__node--logic .pc-workflow-builder__node-title {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

.pc-workflow-builder__node--selected .pc-workflow-builder__node-card {
	background: color-mix(in srgb, var(--pc-workflow-node-container) 14%, var(--pc-card-background));
	border-color: var(--pc-workflow-node-accent);
	box-shadow:
		inset 0 0 0 1px var(--pc-workflow-node-accent),
		var(--pc-elevation-level-2);
}

.pc-workflow-builder__node-accent {
	align-self: stretch;
	min-height: calc(5rem * var(--pc-font-scale, 1));
	background: var(--pc-workflow-node-accent);
	border-radius: var(--pc-shape-corner-full);
}

.pc-workflow-builder__node-icon {
	display: inline-grid;
	width: calc(2.5rem * var(--pc-font-scale, 1));
	height: calc(2.5rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-workflow-node-on-container);
	background: var(--pc-workflow-node-container);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-workflow-builder__node-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__node-kicker {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(0.375rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__node-type {
	color: var(--pc-workflow-node-accent);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 750;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-transform: uppercase;
}

.pc-workflow-builder__operator,
.pc-workflow-builder__nested-logic-operator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(2.75rem * var(--pc-font-scale, 1));
	padding: calc(0.125rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-tertiary-container);
	background: var(--pc-color-tertiary-container);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.pc-workflow-builder__node-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: calc(0.9375rem * var(--pc-font-scale, 1));
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pc-workflow-builder__node-supporting {
	display: -webkit-box;
	overflow: hidden;
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pc-workflow-builder__validity {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: calc(0.125rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	overflow: hidden;
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 700;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-workflow-builder__validity--valid {
	color: var(--pc-color-on-success-container);
	background: var(--pc-color-success-container);
}

.pc-workflow-builder__validity--invalid {
	color: var(--pc-color-on-error-container);
	background: var(--pc-color-error-container);
}

.pc-workflow-builder__validity--not-validated {
	color: var(--pc-color-on-warning-container);
	background: var(--pc-color-warning-container);
}

.pc-workflow-builder__validation-message {
	overflow: hidden;
	color: var(--pc-color-error);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 650;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-workflow-builder__linked-inputs {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	color: var(--pc-color-tertiary);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 700;
}

.pc-workflow-builder__node-actions {
	position: absolute;
	z-index: 12;
	inset-block-start: var(--pc-density-space-sm);
	inset-inline-end: var(--pc-density-space-sm);
	display: flex;
	flex-direction: column;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
	opacity: 0.78;
	transition: opacity var(--pc-motion-effects-fast-duration) var(--pc-motion-effects-fast-easing);
}

.pc-workflow-builder__node--logic > .pc-workflow-builder__node-actions {
	display: grid;
	grid-template-columns: repeat(2, var(--pc-density-control-small));
}

.pc-workflow-builder__node--logic .pc-workflow-builder__node-summary {
	padding-inline-end: calc(5rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__node:hover .pc-workflow-builder__node-actions,
.pc-workflow-builder__node:focus-within .pc-workflow-builder__node-actions {
	opacity: 1;
}

.pc-workflow-builder__node-actions .pc-icon-button,
.pc-workflow-builder__logic-member-actions .pc-icon-button {
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-high);
	border: 1px solid var(--pc-color-outline-variant);
	box-shadow: var(--pc-elevation-level-1);
}

.pc-workflow-builder__node-actions .pc-icon-button:hover,
.pc-workflow-builder__node-actions .pc-icon-button:focus-visible,
.pc-workflow-builder__logic-member-actions .pc-icon-button:hover,
.pc-workflow-builder__logic-member-actions .pc-icon-button:focus-visible {
	color: var(--pc-workflow-node-accent);
}

.pc-workflow-builder__input-ports {
	position: absolute;
	z-index: 8;
	inset: 0 auto 0 0;
	pointer-events: none;
}

.pc-workflow-builder__input-port {
	position: absolute;
	inset-inline-start: 0;
	display: block;
	width: calc(0.75rem * var(--pc-font-scale, 1));
	height: calc(0.75rem * var(--pc-font-scale, 1));
	background: var(--pc-workflow-node-accent);
	border: 2px solid var(--pc-color-surface-container-lowest);
	border-radius: var(--pc-shape-corner-full);
	box-shadow: 0 0 0 1px var(--pc-workflow-node-accent);
	transform: translate(-50%, -50%);
}

.pc-workflow-builder__input-port--open {
	background: var(--pc-color-surface-container-lowest);
	border-color: var(--pc-color-surface-container-lowest);
	box-shadow: 0 0 0 2px var(--pc-color-error);
}

.pc-workflow-builder__logic-expression {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: color-mix(in srgb, var(--pc-color-surface-container-low) 68%, transparent);
	border-radius: 0 0 var(--pc-shape-corner-large) var(--pc-shape-corner-large);
}

.pc-workflow-builder__logic-member {
	position: relative;
	min-width: 0;
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-workflow-builder__logic-member--condition {
	display: grid;
	height: 112px;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: calc(0.625rem * var(--pc-font-scale, 1));
	padding: calc(0.875rem * var(--pc-font-scale, 1));
	padding-inline-end: calc(8rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface);
}

.pc-workflow-builder__logic-member--logic {
	display: flex;
	flex-direction: column;
	overflow: visible;
	background: color-mix(in srgb, var(--pc-color-tertiary-container) 10%, var(--pc-color-surface));
	border: 2px dashed color-mix(in srgb, var(--pc-color-tertiary) 55%, var(--pc-color-outline-variant));
}

.pc-workflow-builder__logic-member--invalid {
	border-color: var(--pc-color-error);
}

.pc-workflow-builder__logic-member-icon {
	display: inline-grid;
	width: calc(2rem * var(--pc-font-scale, 1));
	height: calc(2rem * var(--pc-font-scale, 1));
	place-items: center;
	color: var(--pc-color-on-warning-container);
	background: var(--pc-color-warning-container);
	border-radius: var(--pc-shape-corner-medium);
}

.pc-workflow-builder__logic-member-copy,
.pc-workflow-builder__nested-logic-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__logic-member-copy strong,
.pc-workflow-builder__nested-logic-copy strong {
	font-size: calc(0.8125rem * var(--pc-font-scale, 1));
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere;
}

.pc-workflow-builder__logic-member-copy small,
.pc-workflow-builder__nested-logic-copy small {
	color: var(--pc-color-on-surface-variant);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere;
}

.pc-workflow-builder__logic-member--condition > .pc-workflow-builder__validity {
	position: absolute;
	inset-block-end: calc(0.5rem * var(--pc-font-scale, 1));
	inset-inline-start: calc(3.25rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__nested-logic-header {
	position: relative;
	display: grid;
	height: 80px;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: calc(0.625rem * var(--pc-font-scale, 1));
	padding: calc(0.75rem * var(--pc-font-scale, 1));
	padding-inline-end: calc(5.5rem * var(--pc-font-scale, 1));
	border-block-end: 1px dashed var(--pc-color-outline-variant);
}

.pc-workflow-builder__nested-logic-header > .pc-workflow-builder__validity {
	position: absolute;
	inset-block-end: calc(0.375rem * var(--pc-font-scale, 1));
	inset-inline-start: calc(3.875rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__logic-member-actions {
	position: absolute;
	z-index: 10;
	inset-block-start: calc(0.375rem * var(--pc-font-scale, 1));
	inset-inline-end: calc(0.375rem * var(--pc-font-scale, 1));
	display: flex;
	gap: calc(0.125rem * var(--pc-font-scale, 1));
	opacity: 0.74;
}

.pc-workflow-builder__logic-member:hover > .pc-workflow-builder__logic-member-actions,
.pc-workflow-builder__logic-member:focus-within > .pc-workflow-builder__logic-member-actions,
.pc-workflow-builder__nested-logic-header:hover > .pc-workflow-builder__logic-member-actions,
.pc-workflow-builder__nested-logic-header:focus-within > .pc-workflow-builder__logic-member-actions {
	opacity: 1;
}

.pc-workflow-builder__add-member,
.pc-workflow-builder__logic-empty {
	display: flex;
	width: 100%;
	height: 46px;
	align-items: center;
	justify-content: center;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: color-mix(in srgb, var(--pc-color-surface) 72%, transparent);
	border: 1px dashed var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-medium);
	font: inherit;
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	font-weight: 650;
}

button.pc-workflow-builder__add-member {
	cursor: pointer;
}

button.pc-workflow-builder__add-member:hover:not(:disabled),
button.pc-workflow-builder__add-member:focus-visible {
	color: var(--pc-color-primary);
	background: var(--pc-color-primary-container);
	border-color: var(--pc-color-primary);
	outline: 0;
}

.pc-workflow-builder__outcomes {
	position: absolute;
	z-index: 7;
	inset-block-start: 50%;
	inset-inline-start: 100%;
	display: flex;
	flex-direction: column;
	gap: calc(0.5rem * var(--pc-font-scale, 1));
	transform: translate(-10px, -50%);
	user-select: none;
}

.pc-workflow-builder__outcomes--single {
	gap: 0;
}

.pc-workflow-builder__outcome-slot {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__outcome {
	display: inline-flex;
	width: 112px;
	min-width: 112px;
	min-height: calc(1.75rem * var(--pc-font-scale, 1));
	align-items: center;
	justify-content: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: calc(0.1875rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	border: 1px solid currentColor;
	border-radius: var(--pc-shape-corner-full);
	font: inherit;
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 750;
	white-space: nowrap;
}

.pc-workflow-builder__outcome--editable {
	padding-inline-end: calc(1.75rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__outcome-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-workflow-builder__outcome-edit.pc-icon-button {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	inset-inline-end: calc(0.1875rem * var(--pc-font-scale, 1));
	width: calc(1.375rem * var(--pc-font-scale, 1));
	height: calc(1.375rem * var(--pc-font-scale, 1));
	min-width: 0;
	border: 0;
	transform: translateY(-50%);
}

.pc-workflow-builder__outcome-edit--pass.pc-icon-button {
	color: var(--pc-color-success);
	background: var(--pc-color-success-container);
}

.pc-workflow-builder__outcome-edit--fail.pc-icon-button {
	color: var(--pc-color-error);
	background: var(--pc-color-error-container);
}

.pc-workflow-builder__outcome-edit--continue.pc-icon-button {
	color: var(--pc-color-primary);
	background: var(--pc-color-primary-container);
}

.pc-workflow-builder__outcome i {
	width: calc(0.4375rem * var(--pc-font-scale, 1));
	height: calc(0.4375rem * var(--pc-font-scale, 1));
	background: currentColor;
	border-radius: var(--pc-shape-corner-full);
}

.pc-workflow-builder__outcome-count {
	display: inline-grid;
	min-width: 1rem;
	height: 1rem;
	place-items: center;
	padding-inline: 0.2rem;
	color: inherit;
	background: color-mix(in srgb, currentColor 16%, transparent);
	border-radius: var(--pc-shape-corner-full);
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
}

.pc-workflow-builder__outcome--continue {
	color: var(--pc-color-primary);
	background: var(--pc-color-primary-container);
}

.pc-workflow-builder__outcome--pass {
	color: var(--pc-color-success);
	background: var(--pc-color-success-container);
}

.pc-workflow-builder__outcome--fail {
	color: var(--pc-color-error);
	background: var(--pc-color-error-container);
}

button.pc-workflow-builder__outcome {
	cursor: pointer;
}

button.pc-workflow-builder__outcome:hover:not(:disabled),
button.pc-workflow-builder__outcome:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.pc-workflow-builder__outcome--linking {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.pc-workflow-builder__outcome--open {
	border-style: dashed;
}

.pc-workflow-builder__terminal {
	position: absolute;
	z-index: 4;
	inset-inline-end: var(--pc-density-space-sm);
	inset-block-end: var(--pc-density-space-sm);
	display: inline-flex;
	align-items: center;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: calc(0.1875rem * var(--pc-font-scale, 1)) calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-success);
	background: var(--pc-color-success-container);
	border-radius: var(--pc-shape-corner-full);
	font-size: calc(0.6875rem * var(--pc-font-scale, 1));
	font-weight: 750;
}

.pc-workflow-builder__details {
	position: relative;
}

.pc-workflow-builder__details-trigger {
	display: grid;
	width: var(--pc-density-control-small);
	height: var(--pc-density-control-small);
	place-items: center;
	color: var(--pc-color-on-surface-variant);
	background: var(--pc-color-surface-container-high);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-full);
	box-shadow: var(--pc-elevation-level-1);
	cursor: help;
}

.pc-workflow-builder__details-trigger:hover,
.pc-workflow-builder__details-trigger:focus-visible {
	color: var(--pc-color-primary);
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-workflow-builder__details-popover {
	position: absolute;
	z-index: 30;
	inset-block-start: calc(100% + calc(0.375rem * var(--pc-font-scale, 1)));
	inset-inline-end: 0;
	display: none;
	width: min(calc(14rem * var(--pc-font-scale, 1)), calc(100vw - calc(2rem * var(--pc-font-scale, 1))));
	padding: var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: var(--pc-color-surface-container-high);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-medium);
	box-shadow: var(--pc-elevation-level-3);
	font-size: calc(0.75rem * var(--pc-font-scale, 1));
	line-height: 1.45;
}

.pc-workflow-builder__details:hover .pc-workflow-builder__details-popover,
.pc-workflow-builder__details-trigger:focus-visible + .pc-workflow-builder__details-popover {
	display: block;
}

.pc-workflow-builder__minimap {
	position: absolute;
	z-index: 14;
	inset-inline-end: calc(0.75rem * var(--pc-font-scale, 1));
	inset-block-end: calc(0.75rem * var(--pc-font-scale, 1));
	display: flex;
	width: min(calc(10rem * var(--pc-font-scale, 1)), calc(38% - calc(0.75rem * var(--pc-font-scale, 1))));
	min-width: calc(8.5rem * var(--pc-font-scale, 1));
	flex-direction: column;
	gap: calc(0.25rem * var(--pc-font-scale, 1));
	padding: calc(0.5rem * var(--pc-font-scale, 1));
	color: var(--pc-color-on-surface-variant);
	background: color-mix(in srgb, var(--pc-color-surface-container-high) 92%, transparent);
	border: 1px solid var(--pc-color-outline);
	border-radius: var(--pc-shape-corner-medium);
	box-shadow: var(--pc-elevation-level-3);
	backdrop-filter: blur(5px);
	user-select: none;
}

.pc-workflow-builder__minimap > span {
	font-size: calc(0.625rem * var(--pc-font-scale, 1));
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pc-workflow-builder__minimap svg {
	display: block;
	width: 100%;
	height: calc(5.25rem * var(--pc-font-scale, 1));
	background: var(--pc-color-surface-container-lowest);
	border: 1px solid var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-small);
	cursor: crosshair;
	touch-action: none;
}

.pc-workflow-builder__minimap svg:focus-visible {
	outline: 3px solid var(--pc-color-primary);
	outline-offset: 2px;
}

.pc-workflow-builder__minimap-surface--dragging {
	cursor: grabbing !important;
}

.pc-workflow-builder__minimap-connector {
	fill: none;
	stroke: var(--pc-color-outline);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.pc-workflow-builder__minimap-connector--pass {
	stroke: var(--pc-color-success);
}

.pc-workflow-builder__minimap-connector--fail {
	stroke: var(--pc-color-error);
	stroke-dasharray: 4 3;
}

.pc-workflow-builder__minimap-node {
	fill: var(--pc-color-primary-container);
	stroke: var(--pc-color-primary);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.pc-workflow-builder__minimap-node--logic {
	fill: var(--pc-color-tertiary-container);
	stroke: var(--pc-color-tertiary);
}

.pc-workflow-builder__minimap-node--condition {
	fill: var(--pc-color-warning-container);
	stroke: var(--pc-color-warning);
}

.pc-workflow-builder__minimap-node--action {
	fill: var(--pc-color-success-container);
	stroke: var(--pc-color-success);
}

.pc-workflow-builder__minimap-node--notification {
	fill: var(--pc-color-info-container);
	stroke: var(--pc-color-info);
}

.pc-workflow-builder__minimap-node--invalid {
	stroke: var(--pc-color-error);
}

.pc-workflow-builder__minimap-viewport {
	fill: color-mix(in srgb, var(--pc-color-primary) 14%, transparent);
	stroke: var(--pc-color-primary);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
	-webkit-user-select: text;
	user-select: text;
}

.pc-workflow-builder__empty {
	display: flex;
	width: min(calc(28rem * var(--pc-font-scale, 1)), calc(100% - calc(2rem * var(--pc-font-scale, 1))));
	min-height: calc(20rem * var(--pc-font-scale, 1));
	margin: var(--pc-density-space-xl) auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pc-density-space-sm);
	padding: var(--pc-density-space-xl);
	color: var(--pc-color-on-surface-variant);
	background: color-mix(in srgb, var(--pc-color-surface) 80%, transparent);
	border: 2px dashed var(--pc-color-outline-variant);
	border-radius: var(--pc-shape-corner-large);
	text-align: center;
}

.pc-workflow-builder__empty strong {
	color: var(--pc-color-on-surface);
	font-size: calc(1.125rem * var(--pc-font-scale, 1));
}

.pc-workflow-builder__empty > span {
	max-width: 42ch;
	font-size: calc(0.875rem * var(--pc-font-scale, 1));
	line-height: 1.5;
}

.pc-workflow-builder__empty-icon {
	display: grid;
	width: calc(3.5rem * var(--pc-font-scale, 1));
	height: calc(3.5rem * var(--pc-font-scale, 1));
	margin-block-end: var(--pc-density-space-xs);
	place-items: center;
	color: var(--pc-color-on-primary-container);
	background: var(--pc-color-primary-container);
	border-radius: var(--pc-shape-corner-large);
}

.pc-workflow-builder__loading {
	position: absolute;
	z-index: 40;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pc-density-space-md);
	color: var(--pc-color-on-surface);
	background: color-mix(in srgb, var(--pc-color-surface) 82%, transparent);
	backdrop-filter: blur(2px);
}

@container (max-width: 42rem) {
	.pc-workflow-builder__header {
		align-items: stretch;
		flex-direction: column;
	}

	.pc-workflow-builder__header-actions {
		align-items: stretch;
		justify-content: space-between;
	}

	.pc-workflow-builder__zoom {
		align-self: flex-end;
	}

	.pc-workflow-builder__source {
		padding: var(--pc-density-space-md);
	}

	.pc-workflow-builder__source-heading,
	.pc-workflow-builder__source-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.pc-workflow-builder__source-status {
		align-self: flex-start;
	}

	.pc-workflow-builder__source-actions > span {
		margin-inline-end: 0;
	}

	.pc-workflow-builder__minimap {
		width: calc(7.5rem * var(--pc-font-scale, 1));
		min-width: 0;
		padding: calc(0.375rem * var(--pc-font-scale, 1));
	}

	.pc-workflow-builder__minimap svg {
		height: calc(4rem * var(--pc-font-scale, 1));
	}
}

@media (hover: none) {
	.pc-workflow-builder__node-actions,
	.pc-workflow-builder__logic-member-actions {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-workflow-builder__stage,
	.pc-workflow-builder__scene,
	.pc-workflow-builder__node-card {
		transition: none;
	}
}

@media (forced-colors: active) {
	.pc-workflow-builder__viewport {
		background-image: none;
	}

	.pc-workflow-builder__connector,
	.pc-workflow-builder__connector-marker,
	.pc-workflow-builder__minimap-connector {
		stroke: CanvasText;
		fill: CanvasText;
	}

	.pc-workflow-builder__node-card,
	.pc-workflow-builder__logic-member,
	.pc-workflow-builder__node-actions .pc-icon-button,
	.pc-workflow-builder__logic-member-actions .pc-icon-button,
	.pc-workflow-builder__details-trigger {
		border-color: CanvasText;
	}

	.pc-workflow-builder__node--selected .pc-workflow-builder__node-card,
	.pc-workflow-builder__minimap-viewport {
		outline: 3px solid Highlight;
	}
}
html:has(.pc-theme) {
	scrollbar-width: thin;
	scrollbar-color: rgb(128 128 128 / 0.45) transparent;
}

/* ==== Utility classes (pc-) ====
   General-purpose layout helpers, the toolkit's replacement for MudBlazor's utility classes. Kept last in
   this stylesheet so a utility wins over a component rule of the same specificity; the spacing, display,
   flex, gap, overflow, position, cursor, border, radius, text and colour utilities are !important (as
   MudBlazor's were), and sizing (pc-w-full, pc-h-full), pc-text-truncate, pc-text-secondary,
   pc-text-disabled, pc-elevation-* and pc-col-span-* are not, so a component or feature rule can still
   override them.
   Spacing and gap use MudBlazor's 4px steps at the default text size: step n is n x 0.25rem, multiplied by
   the theme's --pc-font-scale, so the spacing grows and shrinks with the text size (the profile menu's
   text size scales the root font size, PlatformTheme's FontScale the factor). They follow the text size
   only, never the density: components and layout primitives follow density through --pc-density-*.
   Steps: 0-8, 10, 12 and 16; margins also n1-n8 (negative) and auto. Sides: a (all), t, r, b, l
   (physical), x (left and right), y (top and bottom), s and e (inline start and end).
   pc-gap-n uses the same steps. Breakpoint variant: pc-pa-sm-n from MudBlazor's sm breakpoint (600px).
   Border widths are hairline px values, not spacing; pc-border-0/2 change only the width, so pair them
   with pc-border-solid or pc-border-dashed where no style is set. pc-visually-hidden is defined with the
   accessibility helpers above. Catalogue: Platform.Components.Web /utilities. */

/* spacing: margin and padding */
.pc-ma-0 { margin: 0 !important; }
.pc-ma-1 { margin: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-2 { margin: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-3 { margin: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-4 { margin: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-5 { margin: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-6 { margin: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-7 { margin: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-8 { margin: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-10 { margin: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-12 { margin: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-16 { margin: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n1 { margin: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n2 { margin: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n3 { margin: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n4 { margin: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n5 { margin: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n6 { margin: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n7 { margin: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-n8 { margin: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-ma-auto { margin: auto !important; }
.pc-mt-0 { margin-top: 0 !important; }
.pc-mt-1 { margin-top: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-2 { margin-top: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-3 { margin-top: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-4 { margin-top: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-5 { margin-top: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-6 { margin-top: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-7 { margin-top: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-8 { margin-top: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-10 { margin-top: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-12 { margin-top: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-16 { margin-top: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n1 { margin-top: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n2 { margin-top: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n3 { margin-top: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n4 { margin-top: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n5 { margin-top: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n6 { margin-top: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n7 { margin-top: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-n8 { margin-top: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-mt-auto { margin-top: auto !important; }
.pc-mr-0 { margin-right: 0 !important; }
.pc-mr-1 { margin-right: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-2 { margin-right: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-3 { margin-right: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-4 { margin-right: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-5 { margin-right: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-6 { margin-right: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-7 { margin-right: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-8 { margin-right: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-10 { margin-right: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-12 { margin-right: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-16 { margin-right: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n1 { margin-right: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n2 { margin-right: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n3 { margin-right: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n4 { margin-right: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n5 { margin-right: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n6 { margin-right: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n7 { margin-right: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-n8 { margin-right: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-mr-auto { margin-right: auto !important; }
.pc-mb-0 { margin-bottom: 0 !important; }
.pc-mb-1 { margin-bottom: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-2 { margin-bottom: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-3 { margin-bottom: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-4 { margin-bottom: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-5 { margin-bottom: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-6 { margin-bottom: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-7 { margin-bottom: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-8 { margin-bottom: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-10 { margin-bottom: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-12 { margin-bottom: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-16 { margin-bottom: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n1 { margin-bottom: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n2 { margin-bottom: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n3 { margin-bottom: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n4 { margin-bottom: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n5 { margin-bottom: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n6 { margin-bottom: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n7 { margin-bottom: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-n8 { margin-bottom: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-mb-auto { margin-bottom: auto !important; }
.pc-ml-0 { margin-left: 0 !important; }
.pc-ml-1 { margin-left: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-2 { margin-left: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-3 { margin-left: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-4 { margin-left: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-5 { margin-left: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-6 { margin-left: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-7 { margin-left: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-8 { margin-left: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-10 { margin-left: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-12 { margin-left: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-16 { margin-left: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n1 { margin-left: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n2 { margin-left: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n3 { margin-left: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n4 { margin-left: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n5 { margin-left: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n6 { margin-left: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n7 { margin-left: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-n8 { margin-left: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-ml-auto { margin-left: auto !important; }
.pc-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.pc-mx-1 { margin-left: calc(0.25rem * var(--pc-font-scale, 1)) !important; margin-right: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-2 { margin-left: calc(0.5rem * var(--pc-font-scale, 1)) !important; margin-right: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-3 { margin-left: calc(0.75rem * var(--pc-font-scale, 1)) !important; margin-right: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-4 { margin-left: calc(1rem * var(--pc-font-scale, 1)) !important; margin-right: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-5 { margin-left: calc(1.25rem * var(--pc-font-scale, 1)) !important; margin-right: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-6 { margin-left: calc(1.5rem * var(--pc-font-scale, 1)) !important; margin-right: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-7 { margin-left: calc(1.75rem * var(--pc-font-scale, 1)) !important; margin-right: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-8 { margin-left: calc(2rem * var(--pc-font-scale, 1)) !important; margin-right: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-10 { margin-left: calc(2.5rem * var(--pc-font-scale, 1)) !important; margin-right: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-12 { margin-left: calc(3rem * var(--pc-font-scale, 1)) !important; margin-right: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-16 { margin-left: calc(4rem * var(--pc-font-scale, 1)) !important; margin-right: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n1 { margin-left: calc(-0.25rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n2 { margin-left: calc(-0.5rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n3 { margin-left: calc(-0.75rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n4 { margin-left: calc(-1rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n5 { margin-left: calc(-1.25rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n6 { margin-left: calc(-1.5rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n7 { margin-left: calc(-1.75rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-n8 { margin-left: calc(-2rem * var(--pc-font-scale, 1)) !important; margin-right: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.pc-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.pc-my-1 { margin-top: calc(0.25rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-my-2 { margin-top: calc(0.5rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-my-3 { margin-top: calc(0.75rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-my-4 { margin-top: calc(1rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-my-5 { margin-top: calc(1.25rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-my-6 { margin-top: calc(1.5rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-my-7 { margin-top: calc(1.75rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-my-8 { margin-top: calc(2rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-my-10 { margin-top: calc(2.5rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-my-12 { margin-top: calc(3rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-my-16 { margin-top: calc(4rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n1 { margin-top: calc(-0.25rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n2 { margin-top: calc(-0.5rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n3 { margin-top: calc(-0.75rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n4 { margin-top: calc(-1rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n5 { margin-top: calc(-1.25rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n6 { margin-top: calc(-1.5rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n7 { margin-top: calc(-1.75rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-my-n8 { margin-top: calc(-2rem * var(--pc-font-scale, 1)) !important; margin-bottom: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.pc-ms-0 { margin-inline-start: 0 !important; }
.pc-ms-1 { margin-inline-start: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-2 { margin-inline-start: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-3 { margin-inline-start: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-4 { margin-inline-start: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-5 { margin-inline-start: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-6 { margin-inline-start: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-7 { margin-inline-start: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-8 { margin-inline-start: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-10 { margin-inline-start: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-12 { margin-inline-start: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-16 { margin-inline-start: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n1 { margin-inline-start: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n2 { margin-inline-start: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n3 { margin-inline-start: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n4 { margin-inline-start: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n5 { margin-inline-start: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n6 { margin-inline-start: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n7 { margin-inline-start: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-n8 { margin-inline-start: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-ms-auto { margin-inline-start: auto !important; }
.pc-me-0 { margin-inline-end: 0 !important; }
.pc-me-1 { margin-inline-end: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-me-2 { margin-inline-end: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-me-3 { margin-inline-end: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-me-4 { margin-inline-end: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-me-5 { margin-inline-end: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-me-6 { margin-inline-end: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-me-7 { margin-inline-end: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-me-8 { margin-inline-end: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-me-10 { margin-inline-end: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-me-12 { margin-inline-end: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-me-16 { margin-inline-end: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n1 { margin-inline-end: calc(-0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n2 { margin-inline-end: calc(-0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n3 { margin-inline-end: calc(-0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n4 { margin-inline-end: calc(-1rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n5 { margin-inline-end: calc(-1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n6 { margin-inline-end: calc(-1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n7 { margin-inline-end: calc(-1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-me-n8 { margin-inline-end: calc(-2rem * var(--pc-font-scale, 1)) !important; }
.pc-me-auto { margin-inline-end: auto !important; }
.pc-pa-0 { padding: 0 !important; }
.pc-pa-1 { padding: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-2 { padding: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-3 { padding: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-4 { padding: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-5 { padding: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-6 { padding: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-7 { padding: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-8 { padding: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-10 { padding: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-12 { padding: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-pa-16 { padding: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-0 { padding-top: 0 !important; }
.pc-pt-1 { padding-top: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-2 { padding-top: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-3 { padding-top: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-4 { padding-top: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-5 { padding-top: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-6 { padding-top: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-7 { padding-top: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-8 { padding-top: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-10 { padding-top: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-12 { padding-top: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-pt-16 { padding-top: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-0 { padding-right: 0 !important; }
.pc-pr-1 { padding-right: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-2 { padding-right: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-3 { padding-right: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-4 { padding-right: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-5 { padding-right: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-6 { padding-right: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-7 { padding-right: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-8 { padding-right: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-10 { padding-right: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-12 { padding-right: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-pr-16 { padding-right: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-0 { padding-bottom: 0 !important; }
.pc-pb-1 { padding-bottom: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-2 { padding-bottom: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-3 { padding-bottom: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-4 { padding-bottom: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-5 { padding-bottom: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-6 { padding-bottom: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-7 { padding-bottom: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-8 { padding-bottom: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-10 { padding-bottom: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-12 { padding-bottom: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-pb-16 { padding-bottom: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-0 { padding-left: 0 !important; }
.pc-pl-1 { padding-left: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-2 { padding-left: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-3 { padding-left: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-4 { padding-left: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-5 { padding-left: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-6 { padding-left: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-7 { padding-left: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-8 { padding-left: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-10 { padding-left: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-12 { padding-left: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-pl-16 { padding-left: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pc-px-1 { padding-left: calc(0.25rem * var(--pc-font-scale, 1)) !important; padding-right: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-px-2 { padding-left: calc(0.5rem * var(--pc-font-scale, 1)) !important; padding-right: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-px-3 { padding-left: calc(0.75rem * var(--pc-font-scale, 1)) !important; padding-right: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-px-4 { padding-left: calc(1rem * var(--pc-font-scale, 1)) !important; padding-right: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-px-5 { padding-left: calc(1.25rem * var(--pc-font-scale, 1)) !important; padding-right: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-px-6 { padding-left: calc(1.5rem * var(--pc-font-scale, 1)) !important; padding-right: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-px-7 { padding-left: calc(1.75rem * var(--pc-font-scale, 1)) !important; padding-right: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-px-8 { padding-left: calc(2rem * var(--pc-font-scale, 1)) !important; padding-right: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-px-10 { padding-left: calc(2.5rem * var(--pc-font-scale, 1)) !important; padding-right: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-px-12 { padding-left: calc(3rem * var(--pc-font-scale, 1)) !important; padding-right: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-px-16 { padding-left: calc(4rem * var(--pc-font-scale, 1)) !important; padding-right: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.pc-py-1 { padding-top: calc(0.25rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-py-2 { padding-top: calc(0.5rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-py-3 { padding-top: calc(0.75rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-py-4 { padding-top: calc(1rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-py-5 { padding-top: calc(1.25rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-py-6 { padding-top: calc(1.5rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-py-7 { padding-top: calc(1.75rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-py-8 { padding-top: calc(2rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-py-10 { padding-top: calc(2.5rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-py-12 { padding-top: calc(3rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-py-16 { padding-top: calc(4rem * var(--pc-font-scale, 1)) !important; padding-bottom: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-0 { padding-inline-start: 0 !important; }
.pc-ps-1 { padding-inline-start: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-2 { padding-inline-start: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-3 { padding-inline-start: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-4 { padding-inline-start: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-5 { padding-inline-start: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-6 { padding-inline-start: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-7 { padding-inline-start: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-8 { padding-inline-start: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-10 { padding-inline-start: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-12 { padding-inline-start: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-ps-16 { padding-inline-start: calc(4rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-0 { padding-inline-end: 0 !important; }
.pc-pe-1 { padding-inline-end: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-2 { padding-inline-end: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-3 { padding-inline-end: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-4 { padding-inline-end: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-5 { padding-inline-end: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-6 { padding-inline-end: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-7 { padding-inline-end: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-8 { padding-inline-end: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-10 { padding-inline-end: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-12 { padding-inline-end: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-pe-16 { padding-inline-end: calc(4rem * var(--pc-font-scale, 1)) !important; }

@media (min-width: 37.5rem) { /* MudBlazor's sm breakpoint (600px) */
	.pc-pa-sm-0 { padding: 0 !important; }
	.pc-pa-sm-1 { padding: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-2 { padding: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-3 { padding: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-4 { padding: calc(1rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-5 { padding: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-6 { padding: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-7 { padding: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-8 { padding: calc(2rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-10 { padding: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-12 { padding: calc(3rem * var(--pc-font-scale, 1)) !important; }
	.pc-pa-sm-16 { padding: calc(4rem * var(--pc-font-scale, 1)) !important; }
}

/* gap */
.pc-gap-0 { gap: 0 !important; }
.pc-gap-1 { gap: calc(0.25rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-2 { gap: calc(0.5rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-3 { gap: calc(0.75rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-4 { gap: calc(1rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-5 { gap: calc(1.25rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-6 { gap: calc(1.5rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-7 { gap: calc(1.75rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-8 { gap: calc(2rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-10 { gap: calc(2.5rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-12 { gap: calc(3rem * var(--pc-font-scale, 1)) !important; }
.pc-gap-16 { gap: calc(4rem * var(--pc-font-scale, 1)) !important; }

/* display */
.pc-d-none { display: none !important; }
.pc-d-inline { display: inline !important; }
.pc-d-inline-block { display: inline-block !important; }
.pc-d-block { display: block !important; }
.pc-d-flex { display: flex !important; }
.pc-d-inline-flex { display: inline-flex !important; }
.pc-d-grid { display: grid !important; }
.pc-d-inline-grid { display: inline-grid !important; }
.pc-d-contents { display: contents !important; }

/* flex */
.pc-flex-row { flex-direction: row !important; }
.pc-flex-row-reverse { flex-direction: row-reverse !important; }
.pc-flex-column { flex-direction: column !important; }
.pc-flex-column-reverse { flex-direction: column-reverse !important; }
.pc-flex-wrap { flex-wrap: wrap !important; }
.pc-flex-nowrap { flex-wrap: nowrap !important; }
.pc-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.pc-flex-1 { flex: 1 1 0% !important; }
.pc-flex-auto { flex: 1 1 auto !important; }
.pc-flex-none { flex: none !important; }
.pc-flex-grow-0 { flex-grow: 0 !important; }
.pc-flex-grow-1 { flex-grow: 1 !important; }
.pc-flex-shrink-0 { flex-shrink: 0 !important; }
.pc-flex-shrink-1 { flex-shrink: 1 !important; }
.pc-align-start { align-items: flex-start !important; }
.pc-align-center { align-items: center !important; }
.pc-align-end { align-items: flex-end !important; }
.pc-align-baseline { align-items: baseline !important; }
.pc-align-stretch { align-items: stretch !important; }
.pc-align-self-auto { align-self: auto !important; }
.pc-align-self-start { align-self: flex-start !important; }
.pc-align-self-center { align-self: center !important; }
.pc-align-self-end { align-self: flex-end !important; }
.pc-align-self-baseline { align-self: baseline !important; }
.pc-align-self-stretch { align-self: stretch !important; }
.pc-align-content-start { align-content: flex-start !important; }
.pc-align-content-center { align-content: center !important; }
.pc-align-content-end { align-content: flex-end !important; }
.pc-align-content-space-between { align-content: space-between !important; }
.pc-align-content-space-around { align-content: space-around !important; }
.pc-align-content-stretch { align-content: stretch !important; }
.pc-justify-start { justify-content: flex-start !important; }
.pc-justify-center { justify-content: center !important; }
.pc-justify-end { justify-content: flex-end !important; }
.pc-justify-space-between { justify-content: space-between !important; }
.pc-justify-space-around { justify-content: space-around !important; }
.pc-justify-space-evenly { justify-content: space-evenly !important; }

/* grid */
.pc-col-span-1 { grid-column: span 1; }
.pc-col-span-2 { grid-column: span 2; }
.pc-col-span-3 { grid-column: span 3; }
.pc-col-span-4 { grid-column: span 4; }
.pc-col-span-5 { grid-column: span 5; }
.pc-col-span-6 { grid-column: span 6; }
.pc-col-span-full { grid-column: 1 / -1; }

/* sizing */
.pc-w-full { width: 100%; }
.pc-h-full { height: 100%; }
.pc-w-auto { width: auto; }
.pc-h-auto { height: auto; }
.pc-min-w-0 { min-width: 0; }
.pc-min-h-0 { min-height: 0; }

/* overflow and position */
.pc-overflow-auto { overflow: auto !important; }
.pc-overflow-hidden { overflow: hidden !important; }
.pc-overflow-visible { overflow: visible !important; }
.pc-overflow-scroll { overflow: scroll !important; }
.pc-overflow-x-auto { overflow-x: auto !important; }
.pc-overflow-x-hidden { overflow-x: hidden !important; }
.pc-overflow-y-auto { overflow-y: auto !important; }
.pc-overflow-y-hidden { overflow-y: hidden !important; }
.pc-position-static { position: static !important; }
.pc-position-relative { position: relative !important; }
.pc-position-absolute { position: absolute !important; }
.pc-position-fixed { position: fixed !important; }
.pc-position-sticky { position: sticky !important; }

/* text */
.pc-text-start { text-align: start !important; }
.pc-text-center { text-align: center !important; }
.pc-text-end { text-align: end !important; }
.pc-text-justify { text-align: justify !important; }
.pc-text-truncate { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pc-text-nowrap { white-space: nowrap !important; }
.pc-text-wrap { white-space: normal !important; }
.pc-text-break { overflow-wrap: anywhere !important; }
.pc-text-uppercase { text-transform: uppercase !important; }
.pc-text-lowercase { text-transform: lowercase !important; }
.pc-text-capitalize { text-transform: capitalize !important; }
.pc-font-weight-regular { font-weight: 400 !important; }
.pc-font-weight-medium { font-weight: 500 !important; }
.pc-font-weight-bold { font-weight: 700 !important; }

/* colour */
.pc-text-secondary { color: var(--pc-color-on-surface-variant); }
.pc-text-disabled { color: color-mix(in srgb, var(--pc-color-on-surface) 38%, transparent); }
.pc-color-primary { color: var(--pc-color-primary) !important; }
.pc-color-secondary { color: var(--pc-color-secondary) !important; }
.pc-color-tertiary { color: var(--pc-color-tertiary) !important; }
.pc-color-info { color: var(--pc-color-info) !important; }
.pc-color-success { color: var(--pc-color-success) !important; }
.pc-color-warning { color: var(--pc-color-warning) !important; }
.pc-color-error { color: var(--pc-color-error) !important; }
.pc-bg-primary { color: var(--pc-color-on-primary) !important; background-color: var(--pc-color-primary) !important; }
.pc-bg-primary-hover { background-color: color-mix(in srgb, var(--pc-color-primary) 8%, transparent) !important; }
.pc-bg-surface-container-low { background-color: var(--pc-color-surface-container-low) !important; }

/* border, radius, elevation, cursor, direction */
.pc-border-0 { border-width: 0 !important; }
.pc-border-2 { border-width: 2px !important; }
.pc-border-solid { border-style: solid !important; }
.pc-border-dashed { border-style: dashed !important; }
.pc-border-primary { border-color: var(--pc-color-primary) !important; }
.pc-rounded-0 { border-radius: 0 !important; }
.pc-rounded-sm { border-radius: calc(var(--pc-shape-corner-extra-small) / 2) !important; }
.pc-rounded { border-radius: var(--pc-shape-corner-extra-small) !important; }
.pc-rounded-lg { border-radius: var(--pc-shape-corner-small) !important; }
.pc-rounded-full { border-radius: var(--pc-shape-corner-full) !important; }
.pc-elevation-0 { box-shadow: var(--pc-elevation-level-0); }
.pc-elevation-1 { box-shadow: var(--pc-elevation-level-1); }
.pc-elevation-2 { box-shadow: var(--pc-elevation-level-2); }
.pc-elevation-3 { box-shadow: var(--pc-elevation-level-3); }
.pc-cursor-pointer { cursor: pointer !important; }
.pc-cursor-default { cursor: default !important; }
.pc-ltr { direction: ltr !important; }
.pc-rtl { direction: rtl !important; }
/* ==== end of the utility classes ==== */