/* states should be restricted to one of the following; normal (could be implicit so could be omitted) active inactive highlight disabled readonly focus hover selected pressed dragging dropping {prefix}{component name(alphanumeric no spaces)}{component subpart (optional)}{state (optional)}{css property} */ /* add all custom elements here */ cctc-tooltip, cctc-timeout, cctc-progress, cctc-switch, cctc-animatedplaceholder, cctc-pill, cctc-pill-content-container, cctc-button, cctc-concertina, cctc-concertina-header, cctc-concertina-subheader, cctc-concertinaitem, cctc-concertinaitem-header, cctc-concertinaitem-subheader, cctc-concertinaitem-content, cctc-datatextbox, cctc-datatextbox-input, cctc-datatextbox-dropdown, cctc-datatextbox-selected, cctc-infotext, cctc-infoicon, cctc-infoicon-image-container, cctc-lister, cctc-lister-filter-header, cctc-lister-items-container, cctc-lister-display-counts, cctc-lister-item-row, cctc-lister-items-header, cctc-confirmmodal, cctc-confirmmodal-container, cctc-confirmmodal-header, cctc-confirmmodal-responses, cctc-panelmenu, cctc-panelmenuheader, cctc-panelmenuitem, cctc-steps, cctc-steps-controls, cctc-steps-headers, cctc-steps-current-content, cctc-progressstep, cctc-circle, cctc-tabs, cctc-tabs-headers, cctc-tabs-selected-content, cctc-tabitem, cctc-tabitem-header, cctc-input, cctc-input-dropdown-selected, cctc-input-dropdown, cctc-input-dropdown-options, cctc-input-dropdown-option, cctc-chart, cctc-richtext, cctc-rangeselector, cctc-searcher { display: block; } :root { /* User-preferences multiplier applied to the root font-size below. Default 1 (no scaling). Updated at runtime by the preferences.js module when the user picks a larger font scale. Every component uses rem-based sizing, so updating this single token reflows all typography for free. */ --cctc-user-font-scale: 1; /* general variables for use across components ----------------------------------------------*/ --cctc-color: white; --cctc-success-color: var(--bs-success); --cctc-info-color: var(--bs-info); --cctc-warning-color: var(--bs-warning); --cctc-danger-color: var(--bs-danger); /* Semi-transparent danger tint for error-summary panels. Layered over the parent background so it reads correctly on the default dark theme (#505050), the tv theme (#0f2537), and the light theme (white) without per-theme overrides. Consumers may hard-code an opaque colour in their own theme class if an rgba overlay is unsuitable. */ --cctc-danger-background-color: rgba(220, 53, 69, 0.15); --cctc-inactive-color: #A0A0A0; /* #C4C4C4 on --cctc-background-color (#505050) ≈ 4.59:1 — meets WCAG 1.4.3 AA 4.5:1 for text. Previously #C0C0C0 (≈ 4.43:1) which axe-core rightly flagged. Used by tab headers, concertina subheaders, dropdown expand icon, and every component that aliases --cctc-highlight-color. */ --cctc-highlight-color: #C4C4C4; --cctc-hover-color: #C4C4C4; --cctc-background-color: #505050; --cctc-border-radius: 0px; --cctc-border-color: var(--cctc-color); --cctc-border-width: 1px; --cctc-border-style: solid; --cctc-hover-background-color: #686868; --cctc-active-background-color: #686868; --cctc-selected-background-color: #404040; --cctc-highlight-background-color: #767676; --cctc-highlight-border-color: #A0A0A0; --cctc-icon-color: var(--cctc-color); --cctc-icon-active-color: var(--cctc-highlight-color); --cctc-icon-hover-color: var(--cctc-hover-color); --cctc-disabled-color: #595959; --cctc-disabled-background-color: #e6e6e6; --cctc-link-color: cyan; --cctc-code-color: #d7ff47; --cctc-emphasis: #ffc700; --cctc-webkit-line-clamp: 3; /* focus ring - WCAG 2.2 AA 2.4.11 Focus Appearance Contrast against the panel background and the page background must be >= 3:1. --cctc-focus-color picks a bright cyan that sits on both --cctc-background-color (#505050) and a white page background with >= 3:1 contrast. Per-theme overrides may re-declare it. */ /* --cctc-focus-color: #005fcc; */ --cctc-focus-color: var(--cctc-emphasis); --cctc-focus-ring-width: 2px; --cctc-focus-ring-offset: 4px; /* component specific variables ----------------------------------------------*/ /* tabs */ --cctc-tabs-color: var(--cctc-color); --cctc-tabs-background-color: var(--cctc-background-color); /* unselected tab text — picks up --cctc-highlight-color (#C4C4C4, ≈4.59:1 on #505050) which is now pegged to the minimum contrast-safe grey. Previously the variable aliased an older #C0C0C0 value that axe-core flagged at 4.43:1. */ --cctc-tabs-header-color: var(--cctc-highlight-color); --cctc-tabs-header-selected-color: var(--cctc-color); --cctc-tabs-header-background-color: var(--cctc-background-color); --cctc-tabs-header-selected-background-color: var(--cctc-selected-background-color); --cctc-tabs-header-highlight-color: var(--cctc-highlight-color); /* concertina */ --cctc-concertina-icon-color: var(--cctc-icon-color); --cctc-concertina-icon-hover-color: var(--cctc-icon-hover-color); --cctc-concertina-header-color: var(--cctc-color); --cctc-concertina-header-background-color: var(--cctc-background-color); --cctc-concertina-subheader-color: var(--cctc-highlight-color); --cctc-concertina-subheader-background-color: var(--cctc-background-color); /* concertinaitem */ --cctc-concertinaitem-icon-color: var(--cctc-icon-color); --cctc-concertinaitem-icon-hover-color: var(--cctc-icon-hover-color); --cctc-concertinaitem-header-color: var(--cctc-color); --cctc-concertinaitem-header-background-color: var(--cctc-background-color); --cctc-concertinaitem-subheader-color: var(--cctc-highlight-color); --cctc-concertinaitem-subheader-background-color: var(--cctc-background-color); /* panelmenu */ --cctc-panelmenu-background-color: var(--cctc-background-color); --cctc-panelmenu-hover-background-color: var(--cctc-hover-background-color); --cctc-panelmenu-active-background-color: var(--cctc-active-background-color); --cctc-panelmenu-highlight-border-color: var(--cctc-highlight-border-color); --cctc-panelmenu-border-radius: var(--cctc-border-radius); --cctc-panelmenu-border-color: var(--cctc-background-color); --cctc-panelmenu-highlight-color: var(--cctc-highlight-color); /* lister */ --cctc-lister-color: var(--cctc-color); --cctc-lister-background-color: var(--cctc-background-color); --cctc-lister-hover-background-color: var(--cctc-hover-background-color); --cctc-lister-highlight-background-color: var(--cctc-highlight-background-color); --cctc-lister-highlight-color: var(--cctc-highlight-color); --cctc-lister-working-template-color: var(--cctc-highlight-color); --cctc-lister-filter-header-color: var(--cctc-color); --cctc-lister-filter-header-background-color: var(--cctc-background-color); /* header row of the list — same AA-contrast bump as rangeselector labels */ --cctc-lister-items-header-color: var(--cctc-highlight-color); --cctc-lister-items-header-background-color: var(--cctc-selected-background-color); --cctc-lister-display-counts-color: var(--cctc-color); --cctc-lister-display-counts-background-color: var(--cctc-background-color); /* input - covers Text, TextArea, Date, Time, DateAndTime, Numeric, Dropdown, Radio, CheckBox */ --cctc-input-color: var(--cctc-color); --cctc-input-background-color: var(--cctc-background-color); --cctc-input-icon-color: var(--cctc-highlight-color); --cctc-input-icon-hover-color: var(--cctc-color); --cctc-input-readonly-icon-color: var(--cctc-readonly-icon-color); --cctc-input-height: 1.8rem; --cctc-input-padding-left: 0.5rem; --cctc-input-padding-right: 0.5rem; --cctc-input-border-radius: var(--cctc-border-radius); --cctc-input-border-color: var(--cctc-border-color); --cctc-input-border-width: var(--cctc-border-width); --cctc-input-border-style: var(--cctc-border-style); --cctc-input-disabled-color: var(--cctc-disabled-color); --cctc-input-disabled-background-color: var(--cctc-disabled-background-color); --cctc-input-webkit-line-clamp: var(--cctc-webkit-line-clamp); /* datatextbox */ --cctc-datatextbox-input-color: var(--cctc-color); --cctc-datatextbox-input-background-color: var(--cctc-background-color); --cctc-datatextbox-input-border-color: var(--cctc-color); --cctc-datatextbox-input-border-style: var(--cctc-border-style); --cctc-datatextbox-input-border-width: var(--cctc-border-width); --cctc-datatextbox-input-border-top-left-radius: 3px; --cctc-datatextbox-input-border-top-right-radius: 3px; --cctc-datatextbox-input-border-bottom-right-radius: 0; --cctc-datatextbox-input-border-bottom-left-radius: 0; --cctc-datatextbox-dropdown-color: var(--cctc-color); --cctc-datatextbox-dropdown-border-color: var(--cctc-color); --cctc-datatextbox-dropdown-background-color: var(--cctc-active-background-color); --cctc-datatextbox-dropdown-height: 20rem; --cctc-datatextbox-icon-active-color: var(--cctc-icon-active-color); --cctc-datatextbox-icon-hover-color: var(--cctc-icon-hover-color); /* steps */ --cctc-steps-color: var(--cctc-color); --cctc-steps-background-color: var(--cctc-background-color); --cctc-steps-icon-active-color: var(--cctc-icon-active-color); --cctc-steps-icon-hover-color: var(--cctc-icon-hover-color); --cctc-steps-icon-disabled-color: var(--cctc-disabled-color); --cctc-steps-header-color: var(--cctc-selected-background-color); --cctc-steps-header-background-color: var(--cctc-background-color); /* inactive step label — same AA-contrast bump as rangeselector labels */ --cctc-steps-header-inactive-color: var(--cctc-highlight-color); --cctc-steps-header-inactive-background-color: var(--cctc-background-color); /* infotext */ --cctc-infotext-icon-color: var(--cctc-icon-color); --cctc-infotext-icon-hover-color: var(--cctc-hover-color); --cctc-infotext-popover-color: var(--cctc-color); --cctc-infotext-popover-background-color: var(--cctc-highlight-background-color); --cctc-infotext-webkit-line-clamp: var(--cctc-webkit-line-clamp); /*infoicon*/ --cctc-infoicon-image-container-background-color: var(--cctc-background-color); --cctc-infoicon-image-container-border-radius: var(--cctc-border-radius); --cctc-infoicon-image-border-radius: var(--cctc-border-radius); --cctc-infoicon-popover-color: var(--cctc-color); --cctc-infoicon-popover-header-color: var(--cctc-color); --cctc-infoicon-popover-background-color: var(--cctc-highlight-background-color); --cctc-infoicon-popover-header-background-color: var(--cctc-active-background-color); /*animatedplaceholder*/ --cctc-animatedplaceholder-background-color: rgb(205, 127, 50); --cctc-animatedplaceholder-background-image: linear-gradient(to left, rgb(218, 160, 109, .05), rgb(218, 160, 109, .3), rgb(218, 160, 109, .6), rgb(218, 160, 109, .3), rgb(218, 160, 109, .05)); --cctc-animatedplaceholder-border-radius: var(--cctc-border-radius); /*progress*/ --cctc-progress-accent-color: var(--cctc-highlight-color); --cctc-progress-height: 1rem; /*pill*/ --cctc-pill-color: var(--cctc-color); --cctc-pill-background-color: var(--cctc-highlight-background-color); --cctc-pill-border-color: var(--cctc-border-color); --cctc-pill-success-color: var(--cctc-color); --cctc-pill-success-border-color: var(--cctc-success-color); --cctc-pill-success-background-color: var(--cctc-success-color); --cctc-pill-info-color: var(--cctc-color); --cctc-pill-info-background-color: var(--cctc-info-color); --cctc-pill-info-border-color: var(--cctc-info-color); --cctc-pill-warning-color: var(--cctc-color); --cctc-pill-warning-background-color: var(--cctc-warning-color); --cctc-pill-warning-border-color: var(--cctc-warning-color); --cctc-pill-danger-color: var(--cctc-color); --cctc-pill-danger-background-color: var(--cctc-danger-color); --cctc-pill-danger-border-color: var(--cctc-danger-color); /*confirmmodal*/ --cctc-confirmmodal-color: var(--cctc-color); --cctc-confirmmodal-background-color: var(--cctc-background-color); --cctc-confirmmodal-border-color: var(--cctc-color); --cctc-confirmmodal-header-color: var(--cctc-warning-color); --cctc-confirmmodal-response-color: var(--cctc-info-color); --cctc-confirmmodal-response-border-color: var(--cctc-info-color); --cctc-confirmmodal-response-hover-color: var(--cctc-color); --cctc-confirmmodal-response-hover-border-color: var(--cctc-color); --cctc-confirmmodal-border-radius: var(--cctc-border-radius); /* button - covers Button, RefreshButton */ --cctc-button-color: var(--cctc-color); --cctc-button-hover-color: var(--cctc-hover-color); --cctc-button-icon-color: var(--cctc-icon-color); --cctc-button-icon-hover-color: var(--cctc-icon-hover-color); --cctc-button-x-padding: 0.75rem; --cctc-button-y-padding: 0.25rem; --cctc-button-border-radius: var(--cctc-border-radius); --cctc-button-border-color: var(--cctc-border-color); --cctc-button-border-hover-color: var(--cctc-hover-color); --cctc-button-border-width: var(--cctc-border-width); --cctc-button-border-style: var(--cctc-border-style); /*switch*/ --cctc-switch-color: var(--cctc-color); --cctc-switch-disabled-color: var(--cctc-disabled-color); --cctc-switch-background-color: var(--cctc-color); --cctc-switch-disabled-background-color: var(--cctc-disabled-background-color); --cctc-switch-active-hover-box-shadow: 0 0 0 1px var(--cctc-highlight-background-color); --cctc-switch-inactive-hover-box-shadow: 0 0 0 1px var(--cctc-highlight-color); --cctc-switch-slider-active-background-color: var(--cctc-highlight-color); --cctc-switch-slider-inactive-background-color: var(--cctc-highlight-background-color); --cctc-switch-slider-disabled-background-color: var(--cctc-highlight-background-color); /*rangeselector*/ --cctc-rangeselector-track-height: 0.625rem; --cctc-rangeselector-track-background-color: var(--cctc-highlight-background-color); --cctc-rangeselector-track-border-radius: var(--cctc-border-radius); --cctc-rangeselector-fill-background-color: var(--cctc-info-color); --cctc-rangeselector-thumb-size: 1.25rem; --cctc-rangeselector-thumb-background-color: var(--cctc-info-color); --cctc-rangeselector-thumb-border: 2px solid var(--cctc-color); --cctc-rangeselector-thumb-border-radius: 50%; --cctc-rangeselector-thumb-hover-box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.2); --cctc-rangeselector-thumb-dragging-box-shadow: 0 0 0 12px rgba(0, 123, 255, 0.3); --cctc-rangeselector-thumb-focus-box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.3); --cctc-rangeselector-thumb-focus-outline-color: var(--cctc-info-color); --cctc-rangeselector-labels-font-size: 0.75rem; /* was --cctc-inactive-color (#A0A0A0, ≈3.66:1 on #505050) which axe flagged for 1.4.3. Bumped to --cctc-highlight-color (#C4C4C4, ≈4.59:1) for AA-safe label contrast. */ --cctc-rangeselector-labels-color: var(--cctc-highlight-color); --cctc-rangeselector-disabled-opacity: 0.5; /*richtext*/ --cctc-richtext-height: calc(var(--cctc-input-height) * 7); --cctc-richtext-padding-left: var(--cctc-input-padding-left); --cctc-richtext-padding-right: var(--cctc-input-padding-right); --cctc-richtext-color: var(--cctc-input-color); --cctc-richtext-background-color: var(--cctc-input-background-color); --cctc-richtext-border-radius: var(--cctc-input-border-radius); --cctc-richtext-border-color: var(--cctc-input-border-color); --cctc-richtext-border-width: var(--cctc-input-border-width); --cctc-richtext-border-style: var(--cctc-input-border-style); --cctc-richtext-font-size: 0.875rem; --cctc-richtext-padding: 0.75rem; --cctc-richtext-placeholder-color: #999; --cctc-richtext-toolbar-color: var(--cctc-color); --cctc-richtext-toolbar-background-color: var(--cctc-background-color); --cctc-richtext-toolbar-hover-color: var(--cctc-icon-hover-color); --cctc-richtext-toolbar-active-color: var(--cctc-icon-active-color); --cctc-richtext-focus-border-color: var(--cctc-highlight-color); --cctc-richtext-readonly-icon-color: var(--cctc-input-readonly-icon-color); --cctc-richtext-disabled-color: var(--cctc-input-disabled-color); --cctc-richtext-disabled-background-color: var(--cctc-input-disabled-background-color); /*searcher*/ --cctc-searcher-icon-color: var(--cctc-input-icon-color); --cctc-searcher-icon-hover-color: var(--cctc-input-icon-hover-color); --cctc-searcher-icon-active-color: var(--cctc-info-color); --cctc-searcher-border-color: var(--cctc-input-border-color); --cctc-searcher-border-hover-color: var(--cctc-input-icon-hover-color); --cctc-searcher-border-active-color: var(--cctc-info-color); --cctc-searcher-active-background-color: var(--cctc-highlight-background-color); --cctc-searcher-error-color: var(--cctc-danger-color); --cctc-searcher-error-background-color: var(--cctc-input-background-color); --cctc-searcher-error-border-color: var(--cctc-danger-color); } input[type="checkbox"], input[type="radio"] { transform: scale(1.5); } .material-icons { font-size: 0.875rem; } /* Keyboard-only focus indicator. :focus-visible only applies when the browser determines the user is navigating via keyboard (or other non-pointer input), so mouse clicks do not paint an outline but Tab / Shift-Tab do. */ *:focus { outline: 0; } *:focus-visible { outline: var(--cctc-focus-ring-width) solid var(--cctc-focus-color); outline-offset: var(--cctc-focus-ring-offset); } /* Blazored.Modal wraps the dialog in .blazored-modal-focus-trap with empty
sentinels before and after the dialog so it can detect Tab loop-around. They are implementation-internal and must not paint a focus ring — Tabbing through the modal would otherwise flash a stray ring around an invisible element along the dialog edge. */ .blazored-modal-focus-trap > div[tabindex="0"]:focus, .blazored-modal-focus-trap > div[tabindex="0"]:focus-visible { outline: 0; } /* SPA navigation focus indicator. Blazor's adds tabindex="-1" to a non-interactive landing element (typically the page

) and calls .focus() on it after each route change. When the user clicked a link to trigger the route change, browsers do NOT match :focus-visible on that programmatic focus, so the heading receives focus silently and the user has no idea where focus has gone — failing WCAG 2.4.7 Focus Visible. Painting the ring on plain :focus for headings that were made focusable only via tabindex restores a visible target for SPA navigation without affecting headings the consumer hasn't opted in. */ :is(h1, h2, h3, h4, h5, h6)[tabindex]:focus { outline: var(--cctc-focus-ring-width) solid var(--cctc-focus-color); outline-offset: var(--cctc-focus-ring-offset); } /* Visually hidden utility (canonical clip-path pattern). Content stays in the accessibility tree for screen readers but is removed from the visual layout. Used for labels, announcements, skip-link text, etc. */ .cctc-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Root font-size hook for the user-preferences font-scale. Multiplying the browser default 100% by --cctc-user-font-scale rescales every rem-based measurement in the library without per-component changes. Gated on the [data-cctc-user-font-scale] attribute (written by preferences.js only when the user opts into a non-default scale) rather than always-on. Always-on caused chromium's font rasteriser to take a slightly different sub-pixel path even at scale = 1 — visually identical, but enough to bust pixel-level screenshot baselines. Gating keeps the default render bit-identical to the pre-preferences era. */ html[data-cctc-user-font-scale] { font-size: calc(100% * var(--cctc-user-font-scale, 1)); } /* Respect OS-level reduced-motion preference (WCAG 2.3.3 / 2.2.2). Cancels every animation and transition inside the library; consumers may override on their own elements but the library should never introduce motion a user has asked the OS to suppress. The user-preference [data-cctc-reduce-motion="force"] rule below mirrors the same body so a user can opt in to suppression even when the OS does not request it. The two blocks are kept separate (rather than merged with a shared selector list) because @media and attribute selectors cannot share a single rule. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } [data-cctc-reduce-motion="force"] *, [data-cctc-reduce-motion="force"] *::before, [data-cctc-reduce-motion="force"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* High-contrast token overrides. Triggered either by the user-toggleable [data-cctc-high-contrast="on"] attribute or by the OS-level @media (prefers-contrast: more) preference. Both write the same token set so they are interchangeable and additive. Strategy: tighten the existing token aliasing rather than redefining the palette. Bumping --cctc-highlight-color up to --cctc-color collapses the grey/white split that several components use to distinguish primary vs secondary text — every component that reads --cctc-highlight-color (range labels, tab inactive text, lister header text, steps inactive label, etc.) gets full contrast for free. Border and focus-ring widths are bumped to make boundaries unambiguous. */ [data-cctc-high-contrast="on"], [data-cctc-high-contrast="on"] :is(.default, .tv, .light) { --cctc-highlight-color: var(--cctc-color); --cctc-hover-color: var(--cctc-color); --cctc-border-width: 2px; --cctc-input-border-width: 2px; --cctc-button-border-width: 2px; --cctc-focus-ring-width: 3px; --cctc-focus-ring-offset: 4px; } @media (prefers-contrast: more) { :root, :root :is(.default, .tv, .light) { --cctc-highlight-color: var(--cctc-color); --cctc-hover-color: var(--cctc-color); --cctc-border-width: 2px; --cctc-input-border-width: 2px; --cctc-button-border-width: 2px; --cctc-focus-ring-width: 3px; --cctc-focus-ring-offset: 4px; } } /* Shared form-field scaffolding for Text, TextArea, Numeric, Date, Time, DateAndTime, CheckBox, Radio, and Switch. Consumers receive a uniform label / helper / error pattern wired via aria-describedby — no per-component hand-rolling required. */ .cctc-form-label { display: block; margin-bottom: 0.25rem; font-weight: 500; color: var(--cctc-color); } .cctc-form-required-indicator { margin-left: 0.25rem; color: var(--cctc-danger-color); } .cctc-form-helper { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--cctc-highlight-color); } .cctc-form-error { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--cctc-danger-color); } /* Decorative error glyph prepended to .cctc-form-error and the error-summary heading. Rendered as a CSS mask so the colour tracks --cctc-danger-color across themes. The SVG is the Material-style filled exclamation-circle; because this is a ::before pseudo-element it is invisible to assistive technology and does not contribute to the role="alert" announcement. */ .cctc-form-error::before, .cctc-form-error-summary-heading::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.15em; background-color: var(--cctc-danger-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Touch-target expansion — WCAG 2.2 AA 2.5.8 (24×24 CSS px minimum). CheckBox and Radio inputs render smaller than 24×24 to preserve visual design; this wrapper gives the pointer hit area a ≥24×24 footprint without changing the input's rendered size. */ .cctc-input-touch-target { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; flex: 0 0 auto; } /* Error summary live region used by . role="alert" + aria-live guarantee announcement; tabindex="-1" lets consumers move focus to the region after failed submission (pairs with CCTCBase.FocusFirstInvalidAsync). */ .cctc-form-error-summary { margin-bottom: 1rem; padding: 1rem; border: var(--cctc-border-width) solid var(--cctc-danger-color); border-radius: var(--cctc-border-radius); color: var(--cctc-danger-color); background-color: var(--cctc-danger-background-color); } .cctc-form-error-summary-heading { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; } .cctc-form-error-summary ul { margin: 0; padding-left: 1.25rem; } .cctc-form-error-summary a { color: var(--cctc-danger-color); text-decoration: underline; } /* Fieldset used to wrap Radio groups when a GroupLabel is supplied. Neutralises the default fieldset border/padding so visual parity with the unwrapped variant is preserved; semantic fieldset/legend stays intact for assistive technology. */ .cctc-radio-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .cctc-radio-fieldset > legend { padding: 0; margin-bottom: 0.25rem; }