/* Generated from Cantos UI tokens v0.6.0 sha256:25e99c49faa15a9112cd03e7e92f21360b808bbe68f0a2531017d9a0e21f0741 template-sha256:4c885450094628ff27be3a172b74efc90553ac30953f67387d54a6b214b4d778
   by python3 scripts/ui_tokens.py. Do not edit. */
/* Component-owned styles. All selectors stay inside the theme boundary. */
/* The one Web corner mapping. The shared shape.* roles (tokens.json) serve the 4/8/12/16/20
   scale tuned for CMP density; Web keeps the soft, expressive corners it shipped with in v0.2.0
   (24/12/18/24). Web components read only these roles, never --cantos-shape-{control,reading,
   field,container,overlay}, so a shared CMP shape change cannot shrink Web again. Full/pill stays
   the shared --cantos-shape-pill. Editing a value here needs a Web visual review and touches neither
   the canonical source nor any CMP output. The generator accepts only --cantos-web-* custom
   properties declared by this template and refuses any that shadow a canonical role. */
:where(.cantos-ui) {
  --cantos-web-shape-control: 1.5rem;
  --cantos-web-shape-reading: 0.75rem;
  --cantos-web-shape-container: 1.125rem;
  --cantos-web-shape-overlay: 1.5rem;
  --cantos-web-shape-panel: 1.5rem;
}
/* Center the visible cap-to-baseline box, rather than the font's asymmetric leading.
   Padding on the control leaves room for accents/descenders; never clip the label.
   Browsers without text-box support retain the token line-height fallback. */
:where(.cantos-ui) .cui-control-label {
  display: block;
  min-inline-size: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
:where(.cantos-ui) {
  --cantos-web-supporting-text-color: var(--cantos-color-on-surface-variant);
  color: var(--cantos-color-on-surface);
  background: var(--cantos-color-background);
  font-family: var(--cantos-type-family-ui);
  font-size: var(--cantos-type-body-size);
  line-height: var(--cantos-type-body-line-height);
  font-weight: var(--cantos-type-body-weight);
}
:where(.cantos-ui) .cui-icon {
  display: inline-block;
  inline-size: var(--cantos-size-icon);
  block-size: var(--cantos-size-icon);
  flex-shrink: 0;
  fill: currentColor;
  vertical-align: middle;
}
:where(.cantos-ui) .cui-button-field {
  display: inline-grid;
  justify-items: start;
  gap: var(--cantos-space-xs);
  min-inline-size: 0;
}
:where(.cantos-ui) .cui-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cantos-space-sm);
  min-block-size: var(--cantos-size-control);
  min-inline-size: var(--cantos-size-control);
  max-inline-size: 100%;
  padding: var(--cantos-space-sm) var(--cantos-space-control-inline);
  border: 0;
  border-radius: var(--cantos-web-shape-control);
  background: var(--cantos-color-primary);
  color: var(--cantos-color-on-primary);
  font-family: var(--cantos-type-family-ui);
  font-size: var(--cantos-type-label-size);
  line-height: var(--cantos-type-label-line-height);
  font-weight: var(--cantos-type-label-weight);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--cantos-motion-feedback-duration) var(--cantos-motion-effects-easing);
}
:where(.cantos-ui) .cui-button[data-variant="tonal"] {
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
}
:where(.cantos-ui) .cui-button[data-variant="text"] {
  background: transparent;
  color: var(--cantos-color-primary);
}
:where(.cantos-ui) .cui-button:where(:hover, :active):not(:disabled) {
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent));
}
:where(.cantos-ui) .cui-button:active:not(:disabled) {
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--cantos-state-pressed-opacity) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--cantos-state-pressed-opacity) * 100%), transparent));
}
:where(.cantos-ui) .cui-button:focus-visible {
  outline: var(--cantos-size-focus-width) solid var(--cantos-color-focus);
  outline-offset: var(--cantos-size-focus-offset);
}
:where(.cantos-ui) .cui-button:disabled {
  background: var(--cantos-color-surface-container);
  color: var(--cantos-color-on-surface-variant);
  cursor: default;
}
:where(.cantos-ui) .cui-button-reason {
  color: var(--cantos-web-supporting-text-color);
  font-size: var(--cantos-type-metadata-size);
  line-height: var(--cantos-type-metadata-line-height);
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-button-reason[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  :where(.cantos-ui) .cui-button { transition: none; }
}
@media (forced-colors: active) {
  :where(.cantos-ui) .cui-button { border: var(--cantos-size-border) solid ButtonText; }
  :where(.cantos-ui) .cui-button:disabled { color: GrayText; }
}
/* Bounded development preview layout; app pane rules remain app-owned. */
:where(.cantos-ui) .cui-preview {
  box-sizing: border-box;
  max-inline-size: 60rem;
  margin-inline: auto;
  padding: var(--cantos-space-lg);
}
:where(.cantos-ui) .cui-preview-title {
  font-family: var(--cantos-type-family-editorial);
  font-size: var(--cantos-type-headline-size);
  line-height: var(--cantos-type-headline-line-height);
  font-weight: var(--cantos-type-headline-weight);
}
:where(.cantos-ui) .cui-preview-samples {
  display: grid;
  gap: var(--cantos-space-lg);
}
@media (min-width: 37.5rem) {
  :where(.cantos-ui) .cui-preview-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Composable layout and quiet feedback. Width measures are renderer-local geometry. */
:where(.cantos-ui) :where(.cui-container, .cui-surface, .cui-stack, .cui-grid-container, .cui-grid) {
  box-sizing: border-box;
  min-inline-size: 0;
}
:where(.cantos-ui) .cui-container { inline-size: 100%; margin-inline: auto; padding-inline: var(--cantos-space-md); }
:where(.cantos-ui) .cui-container[data-width="reading"] { max-inline-size: 75ch; }
:where(.cantos-ui) .cui-container[data-width="wide"] { max-inline-size: 76rem; }
:where(.cantos-ui) .cui-surface { --cantos-web-supporting-text-color: var(--cantos-color-on-surface-variant); background: var(--cantos-color-surface); color: var(--cantos-color-on-surface); border-radius: var(--cantos-web-shape-container); padding: var(--cantos-space-md); }
:where(.cantos-ui) .cui-surface[data-tone="container"] { background: var(--cantos-color-surface-container); }
:where(.cantos-ui) .cui-surface[data-tone="high"] { background: var(--cantos-color-surface-container-high); }
:where(.cantos-ui) .cui-surface[data-tone="reading"] { border-radius: var(--cantos-web-shape-reading); font-family: var(--cantos-type-family-editorial); line-height: var(--cantos-type-editor-line-height); }
:where(.cantos-ui) .cui-surface[data-inset="none"] { padding: 0; }
:where(.cantos-ui) .cui-surface[data-inset="xs"] { padding: var(--cantos-space-xs); }
:where(.cantos-ui) .cui-surface[data-inset="sm"] { padding: var(--cantos-space-sm); }
:where(.cantos-ui) .cui-surface[data-inset="lg"] { padding: var(--cantos-space-lg); }
:where(.cantos-ui) .cui-stack { display: flex; flex-direction: column; gap: var(--cantos-space-md); }
:where(.cantos-ui) .cui-stack[data-direction="horizontal"] { flex-direction: row; flex-wrap: wrap; align-items: center; }
:where(.cantos-ui) :where(.cui-stack, .cui-grid) > * { min-inline-size: 0; }
:where(.cantos-ui) .cui-grid-container { container-type: inline-size; inline-size: 100%; flex: 1 1 100%; }
:where(.cantos-ui) .cui-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cantos-space-md); }
:where(.cantos-ui) :where(.cui-stack, .cui-grid)[data-gap="none"] { gap: 0; }
:where(.cantos-ui) :where(.cui-stack, .cui-grid)[data-gap="xs"] { gap: var(--cantos-space-xs); }
:where(.cantos-ui) :where(.cui-stack, .cui-grid)[data-gap="sm"] { gap: var(--cantos-space-sm); }
:where(.cantos-ui) :where(.cui-stack, .cui-grid)[data-gap="lg"] { gap: var(--cantos-space-lg); }
@container (min-width: 37.5rem) {
  :where(.cantos-ui) .cui-grid:where([data-columns="two"], [data-columns="three"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 52.5rem) {
  :where(.cantos-ui) .cui-grid[data-columns="three"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:where(.cantos-ui) :where(.cui-badge, .cui-status, .cui-loading-state, .cui-empty-state, .cui-error-state) {
  display: flex;
  align-items: start;
  gap: var(--cantos-space-sm);
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  color: var(--cantos-color-on-surface);
}
:where(.cantos-ui) .cui-badge { display: inline-flex; align-items: center; padding: var(--cantos-space-xs) var(--cantos-space-sm); border-radius: var(--cantos-web-shape-reading); font-size: var(--cantos-type-metadata-size); }
:where(.cantos-ui) .cui-status { padding: var(--cantos-space-inset); border-radius: var(--cantos-web-shape-reading); }
:where(.cantos-ui) :where(.cui-badge, .cui-status)[data-tone="neutral"] { background: var(--cantos-color-surface-container); }
:where(.cantos-ui) :where(.cui-badge, .cui-status)[data-tone="info"] { background: var(--cantos-color-primary-container); color: var(--cantos-color-on-primary-container); }
:where(.cantos-ui) :where(.cui-badge, .cui-status)[data-tone="success"] { background: var(--cantos-color-success-container); color: var(--cantos-color-success); }
:where(.cantos-ui) :where(.cui-badge, .cui-status)[data-tone="warning"] { background: var(--cantos-color-warning-container); color: var(--cantos-color-warning); }
:where(.cantos-ui) :where(.cui-badge, .cui-status)[data-tone="error"] { background: var(--cantos-color-error-container); color: var(--cantos-color-error); }
:where(.cantos-ui) :where(.cui-status-content, .cui-empty-state > div, .cui-error-state > div) { min-inline-size: 0; }
:where(.cantos-ui) .cui-empty-state { padding: var(--cantos-space-md); }
:where(.cantos-ui) .cui-error-state { padding: var(--cantos-space-md); background: var(--cantos-color-error-container); color: var(--cantos-color-error); border-radius: var(--cantos-web-shape-reading); }
:where(.cantos-ui) .cui-state-title { margin-block: 0 var(--cantos-space-sm); font-weight: var(--cantos-type-label-weight); }
:where(.cantos-ui) .cui-loading-mark { display: block; flex-shrink: 0; inline-size: var(--cantos-size-icon); block-size: var(--cantos-size-icon); border: var(--cantos-size-focus-width) dotted currentColor; border-radius: var(--cantos-shape-pill); box-sizing: border-box; }
:where(.cantos-ui) .cui-avatar {
  --cui-avatar-size: var(--cantos-size-avatar-medium);
  --cui-avatar-glyph: 0.44;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: var(--cui-avatar-size);
  block-size: var(--cui-avatar-size);
  overflow: hidden;
  border-radius: var(--cantos-shape-pill);
  font-family: var(--cantos-type-family-ui);
  font-weight: var(--cantos-type-label-weight);
  /* Initials fill the fixed circle; they scale with the diameter, never escape it. */
  font-size: calc(var(--cui-avatar-size) * var(--cui-avatar-glyph));
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
:where(.cantos-ui) .cui-avatar[data-size="small"] { --cui-avatar-size: var(--cantos-size-avatar-small); }
:where(.cantos-ui) .cui-avatar[data-size="large"] { --cui-avatar-size: var(--cantos-size-avatar-large); }
:where(.cantos-ui) .cui-avatar[data-initials="pair"] { --cui-avatar-glyph: 0.36; }
:where(.cantos-ui) .cui-avatar-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
:where(.cantos-ui) .cui-avatar[data-tone="lavender"] { background: var(--cantos-color-avatar-lavender); color: var(--cantos-color-on-avatar-lavender); }
:where(.cantos-ui) .cui-avatar[data-tone="gold"] { background: var(--cantos-color-avatar-gold); color: var(--cantos-color-on-avatar-gold); }
:where(.cantos-ui) .cui-avatar[data-tone="sage"] { background: var(--cantos-color-avatar-sage); color: var(--cantos-color-on-avatar-sage); }
:where(.cantos-ui) .cui-avatar[data-tone="rose"] { background: var(--cantos-color-avatar-rose); color: var(--cantos-color-on-avatar-rose); }
:where(.cantos-ui) .cui-avatar[data-tone="sky"] { background: var(--cantos-color-avatar-sky); color: var(--cantos-color-on-avatar-sky); }
:where(.cantos-ui) .cui-avatar[data-tone="clay"] { background: var(--cantos-color-avatar-clay); color: var(--cantos-color-on-avatar-clay); }
@media (forced-colors: active) {
  :where(.cantos-ui) :where(.cui-badge, .cui-status, .cui-error-state, .cui-avatar) { border: var(--cantos-size-border) solid CanvasText; }
}

/* Actions/navigation additions; merge into foundation.css.in, then regenerate. */
:where(.cantos-ui) .cui-button[data-variant="secondary"] {
  border: var(--cantos-size-border) solid var(--cantos-color-outline);
  background: transparent;
  color: var(--cantos-color-primary);
}
:where(.cantos-ui) .cui-button[data-variant="danger"] {
  background: var(--cantos-color-error-container);
  color: var(--cantos-color-error);
}
:where(.cantos-ui) .cui-button:disabled {
  background: var(--cantos-color-surface-container);
  color: var(--cantos-color-on-surface-variant);
}
:where(.cantos-ui) .cui-icon-button {
  padding: var(--cantos-space-sm);
}
/* Issue 127: opt-in auth/account roles. Ordinary controls retain the Web mapping above.
   Native :active and focus interrupt without a timer; this is a CSS transition, not a spring. */
:where(.cantos-ui) .cui-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:where(.cantos-ui) .cui-button:where([data-variant="auth-primary"], [data-variant="auth-secondary"], [data-variant="auth-outlined"]) {
  --cantos-web-auth-capsule: var(--cantos-shape-pill);
  border-radius: var(--cantos-web-auth-capsule);
  min-block-size: var(--cantos-size-auth-secondary);
  /* Wrapped labels need room inside the capsule ends as text grows. */
  padding-block: max(var(--cantos-space-sm), 1em);
  transition: background-color var(--cantos-motion-feedback-duration) var(--cantos-motion-effects-easing), border-radius var(--cantos-motion-shape-duration) var(--cantos-motion-effects-easing);
}
:where(.cantos-ui) .cui-button[data-variant="auth-primary"] {
  min-block-size: var(--cantos-size-auth-primary);
  flex-wrap: wrap;
}
/* Preserve a readable label column before moving the decorative icon above it.
   This text measure is responsive geometry, not a second semantic token. */
:where(.cantos-ui) .cui-button[data-variant="auth-primary"] .cui-control-label {
  flex: 1 1 auto;
  min-inline-size: min(100%, 12ch);
}
:where(.cantos-ui) .cui-button[data-variant="auth-primary"] .cui-button-icon {
  inline-size: var(--cantos-size-auth-icon);
  block-size: var(--cantos-size-auth-icon);
  border-radius: var(--cantos-shape-pill);
  background: var(--cantos-color-on-primary);
  color: var(--cantos-color-primary);
}
:where(.cantos-ui) .cui-button[data-variant="auth-secondary"] {
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
}
:where(.cantos-ui) .cui-button[data-variant="auth-outlined"] {
  border: var(--cantos-size-auth-outline) solid var(--cantos-color-outline);
  background: transparent;
  color: var(--cantos-color-primary);
}
:where(.cantos-ui) .cui-button:where([data-variant="auth-primary"], [data-variant="auth-secondary"], [data-variant="auth-outlined"]):active:not(:disabled) {
  border-radius: var(--cantos-shape-auth-pressed);
}
:where(.cantos-ui) .cui-button:where([data-variant="auth-primary"], [data-variant="auth-secondary"], [data-variant="auth-outlined"]):disabled {
  background: var(--cantos-color-surface-container);
  color: var(--cantos-color-on-surface-variant);
}
:where(.cantos-ui) .cui-button[data-variant="auth-primary"]:disabled .cui-button-icon {
  background: var(--cantos-color-on-surface-variant);
  color: var(--cantos-color-surface-container);
}
:where(.cantos-ui) .cui-back-button {
  min-block-size: var(--cantos-size-back-control);
  padding: 0;
  background: transparent;
  color: var(--cantos-color-primary);
  border-radius: var(--cantos-shape-pill);
}
/* Back keeps its quiet text-action anatomy while blocked; the shared disabled
   foreground/reason remain readable and the icon retains its tonal circle. */
:where(.cantos-ui) .cui-back-button:disabled {
  background: transparent;
}
:where(.cantos-ui) .cui-back-button .cui-button-icon {
  inline-size: var(--cantos-size-back-control);
  block-size: var(--cantos-size-back-control);
  border-radius: calc(var(--cantos-size-back-control) / 2);
  background: var(--cantos-color-surface-container);
  transition: border-radius var(--cantos-motion-shape-duration) var(--cantos-motion-effects-easing);
}
:where(.cantos-ui) .cui-back-button:active:not(:disabled) .cui-button-icon {
  border-radius: var(--cantos-shape-auth-pressed);
}
:where(.cantos-ui) .cui-back-button-icon-only { gap: 0; }
/* #222 candidate: the native button owns the one state layer and the full target.
   Keep the existing IconTonal presentation until this Web variant is admitted. */
:where(.cantos-ui) .cui-back-button-unified {
  min-inline-size: var(--cantos-size-back-control);
  padding: var(--cantos-space-sm) var(--cantos-space-control-inline);
  /* Cap the corner at the Web control role so a wrapped label never becomes an oval. */
  border-radius: var(--cantos-web-shape-control);
  transition: background-color var(--cantos-motion-feedback-duration) var(--cantos-motion-effects-easing), border-radius var(--cantos-motion-shape-duration) var(--cantos-motion-effects-easing);
}
:where(.cantos-ui) .cui-back-button-unified .cui-button-icon {
  inline-size: var(--cantos-size-icon);
  block-size: var(--cantos-size-icon);
  background: transparent;
  border-radius: 0;
  transition: none;
}
:where(.cantos-ui) .cui-back-button-unified .cui-control-label { text-align: start; }
:where(.cantos-ui) .cui-back-button-unified:active:not(:disabled) {
  border-radius: var(--cantos-shape-auth-pressed);
}
:where(.cantos-ui) .cui-back-button-unified:dir(rtl) .cui-icon { transform: scaleX(-1); }
:where(.cantos-ui) .cui-surface[data-tone="primary-container"] {
  --cantos-web-supporting-text-color: var(--cantos-color-on-primary-container);
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
}
/* Supporting text inherits a semantic binding, reset by each Surface and UiRoot.
   A descendant color override would leak across nested containment/theme boundaries. */
:where(.cantos-ui) .cui-surface[data-variant="auth"] { border-radius: var(--cantos-shape-auth-container); }
:where(.cantos-ui) .cui-surface[data-variant="profile"] { border-radius: var(--cantos-shape-profile-container); }
:where(.cantos-ui) .cui-surface[data-variant="membership"] { border-radius: var(--cantos-shape-membership-container); }
:where(.cantos-ui) .cui-surface[data-variant="account-group"] { border-radius: var(--cantos-shape-account-group); }
:where(.cantos-ui) .cui-field:is([data-variant="auth-tonal"], [data-variant="auth-tonal-spacious"]) .cui-field-control {
  min-block-size: var(--cantos-size-auth-field);
  border-radius: var(--cantos-shape-auth-field);
}
/* Invalid input retains the existing errorContainer cue. Read-only/disabled already use
   this quiet container tone and keep their native semantics and foreground unchanged. */
:where(.cantos-ui) .cui-field:is([data-variant="auth-tonal"], [data-variant="auth-tonal-spacious"]) .cui-field-control:not([aria-invalid="true"]) {
  background: var(--cantos-color-surface-container);
}
:where(.cantos-ui) .cui-field:is([data-variant="auth-tonal"], [data-variant="auth-tonal-spacious"]) .cui-field-control:hover:not(:disabled):not([readonly]):not([aria-invalid="true"]) {
  background: color-mix(in srgb, var(--cantos-color-on-surface) calc(var(--cantos-state-hover-opacity) * 100%), var(--cantos-color-surface-container));
}
@media (prefers-reduced-motion: reduce) {
  :where(.cantos-ui) .cui-button:where([data-variant="auth-primary"], [data-variant="auth-secondary"], [data-variant="auth-outlined"]) { transition: none; }
  :where(.cantos-ui) .cui-back-button .cui-button-icon { transition: none; }
  :where(.cantos-ui) .cui-back-button-unified { transition: none; }
}
@media (forced-colors: active) {
  :where(.cantos-ui) .cui-button[data-variant="auth-outlined"] { border: var(--cantos-size-auth-outline) solid ButtonText; }
}
:where(.cantos-ui) .cui-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:where(.cantos-ui) :where(.cui-link, .cui-nav-item) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--cantos-space-sm);
  min-block-size: var(--cantos-size-control);
  max-inline-size: 100%;
  color: var(--cantos-color-primary);
  font-family: var(--cantos-type-family-ui);
  font-size: var(--cantos-type-label-size);
  line-height: var(--cantos-type-label-line-height);
  font-weight: var(--cantos-type-label-weight);
  overflow-wrap: anywhere;
  text-underline-offset: var(--cantos-space-xs);
}
:where(.cantos-ui) .cui-link:hover {
  text-decoration-thickness: var(--cantos-size-border);
}
:where(.cantos-ui) .cui-nav-item {
  min-inline-size: var(--cantos-size-control);
  padding: var(--cantos-space-sm) var(--cantos-space-inset);
  border-radius: var(--cantos-web-shape-control);
  color: var(--cantos-color-on-surface);
  text-decoration: none;
  transition: background-color var(--cantos-motion-feedback-duration) var(--cantos-motion-effects-easing);
}
:where(.cantos-ui) .cui-nav-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-nav-item[aria-current="page"] {
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
  text-decoration: underline;
}
:where(.cantos-ui) .cui-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--cantos-space-xs);
  min-inline-size: 0;
}
:where(.cantos-ui) .cui-nav-tabs > .cui-nav-item {
  flex: 0 1 auto;
}
:where(.cantos-ui) .cui-filter-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cantos-space-xs);
  min-block-size: var(--cantos-size-control);
  min-inline-size: var(--cantos-size-control);
  max-inline-size: 100%;
  padding: var(--cantos-space-sm) var(--cantos-space-inset);
  border: 0;
  border-radius: var(--cantos-shape-pill);
  background: var(--cantos-color-surface-container);
  color: var(--cantos-color-on-surface);
  font-family: var(--cantos-type-family-ui);
  font-size: var(--cantos-type-label-size);
  line-height: var(--cantos-type-label-line-height);
  font-weight: var(--cantos-type-label-weight);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--cantos-motion-feedback-duration) var(--cantos-motion-effects-easing);
}
:where(.cantos-ui) .cui-filter-chip[aria-pressed="true"] {
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
}
:where(.cantos-ui) .cui-chip-check {
  display: inline-flex;
  visibility: hidden;
  flex-shrink: 0;
}
:where(.cantos-ui) .cui-filter-chip[aria-pressed="true"] .cui-chip-check {
  visibility: visible;
}
:where(.cantos-ui) :where(.cui-nav-item, .cui-filter-chip):where(:hover, :active):not(:disabled) {
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent));
}
:where(.cantos-ui) .cui-filter-chip:active:not(:disabled) {
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--cantos-state-pressed-opacity) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--cantos-state-pressed-opacity) * 100%), transparent));
}
:where(.cantos-ui) :where(.cui-link, .cui-nav-item, .cui-filter-chip):focus-visible {
  outline: var(--cantos-size-focus-width) solid var(--cantos-color-focus);
  outline-offset: var(--cantos-size-focus-offset);
}
:where(.cantos-ui) .cui-filter-chip:disabled {
  background: var(--cantos-color-surface-container);
  color: var(--cantos-color-on-surface-variant);
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  :where(.cantos-ui) :where(.cui-nav-item, .cui-filter-chip) { transition: none; }
}
@media (forced-colors: active) {
  :where(.cantos-ui) .cui-nav-item[aria-current="page"] {
    text-decoration-thickness: var(--cantos-size-focus-width);
  }
  :where(.cantos-ui) .cui-filter-chip { border: var(--cantos-size-border) solid ButtonText; }
  :where(.cantos-ui) .cui-filter-chip:disabled { color: GrayText; }
  :where(.cantos-ui) .cui-filter-chip[aria-pressed="true"] { border-color: Highlight; }
}

/* Filled native fields: tone identifies the editable area; space groups questions.
   Persistent labels stay outside the control for long Vietnamese text and zoom. */
:where(.cantos-ui) .cui-field {
  display: grid;
  align-content: start;
  gap: var(--cantos-space-xs);
  min-inline-size: 0;
}
:where(.cantos-ui) .cui-field-label {
  color: var(--cantos-color-on-surface);
  font-size: var(--cantos-type-label-size);
  line-height: var(--cantos-type-label-line-height);
  font-weight: var(--cantos-type-label-weight);
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-field-control {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--cantos-size-control);
  max-inline-size: 100%;
  padding: var(--cantos-space-sm) var(--cantos-space-control-inline);
  border: 0;
  border-radius: var(--cantos-web-shape-reading);
  background: var(--cantos-color-surface-container-high);
  color: var(--cantos-color-on-surface);
  font: inherit;
  line-height: var(--cantos-type-body-line-height);
}
:where(.cantos-ui) .cui-field-control:hover:not(:disabled):not([readonly]):not([aria-invalid="true"]) {
  background: color-mix(in srgb, var(--cantos-color-on-surface) calc(var(--cantos-state-hover-opacity) * 100%), var(--cantos-color-surface-container-high));
}
:where(.cantos-ui) .cui-field-control::placeholder {
  color: var(--cantos-color-on-surface-variant);
  opacity: 1;
}
/* Safari's native menulist ignores min-block-size. Style the native select while
   keeping its built-in option popup, keyboard handling and form semantics. */
:where(.cantos-ui) .cui-select {
  position: relative;
  align-self: start;
  min-inline-size: 0;
}
:where(.cantos-ui) .cui-select > select {
  appearance: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-end: calc(var(--cantos-space-control-inline) + var(--cantos-size-icon) + var(--cantos-space-xs));
}
:where(.cantos-ui) .cui-select > .cui-icon {
  position: absolute;
  inset-inline-end: var(--cantos-space-control-inline);
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cantos-color-on-surface-variant);
}
/* Web-only Select presentation: the Popover top layer avoids clipping ancestors;
   the DOM adapter anchors it to the trigger and constrains it to the visual viewport. */
:where(.cantos-ui) .cui-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cantos-space-sm);
  text-align: start;
  cursor: pointer;
}
:where(.cantos-ui) .cui-select-trigger > span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
:where(.cantos-ui) :is(.cui-select-trigger, .cui-select-native-indicator, .cui-select > select)[hidden] {
  display: none;
}
:where(.cantos-ui) .cui-select-native-indicator {
  position: absolute;
  inset-inline-end: var(--cantos-space-control-inline);
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cantos-color-on-surface-variant);
}
:where(.cantos-ui) .cui-select-menu {
  display: none;
  box-sizing: border-box;
  position: fixed;
  inset: auto;
  margin: 0;
  padding: var(--cantos-space-sm);
  overflow: auto;
  overscroll-behavior: contain;
  border: var(--cantos-size-border) solid var(--cantos-color-outline-variant);
  border-radius: var(--cantos-web-shape-overlay);
  background: var(--cantos-color-surface-container-high);
  color: var(--cantos-color-on-surface);
  box-shadow: var(--cantos-elevation-overlay);
  font: inherit;
}
:where(.cantos-ui) .cui-select-menu:popover-open { display: block; }
:where(.cantos-ui) .cui-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cantos-space-sm);
  box-sizing: border-box;
  min-block-size: var(--cantos-size-control);
  padding: var(--cantos-space-sm) var(--cantos-space-control-inline);
  border: var(--cantos-size-border) solid transparent;
  border-radius: var(--cantos-web-shape-control);
  cursor: pointer;
}
:where(.cantos-ui) .cui-select-option-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-select-option-check {
  display: flex;
  visibility: hidden;
  flex: none;
}
:where(.cantos-ui) .cui-select-option[aria-selected="true"] {
  background: var(--cantos-color-primary-container);
  color: var(--cantos-color-on-primary-container);
}
:where(.cantos-ui) .cui-select-option[aria-selected="true"] .cui-select-option-check {
  visibility: visible;
}
:where(.cantos-ui) .cui-select-option[aria-disabled="false"]:hover {
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--cantos-state-hover-opacity) * 100%), transparent));
}
:where(.cantos-ui) .cui-select-option[data-active="true"] {
  outline: var(--cantos-size-border) solid var(--cantos-color-focus);
  outline-offset: calc(-1 * var(--cantos-size-border));
}
:where(.cantos-ui) .cui-select-option[aria-disabled="true"] {
  color: var(--cantos-color-on-surface-variant);
  cursor: default;
}
@media (forced-colors: active) {
  :where(.cantos-ui) .cui-select-option[aria-selected="true"] {
    border-color: Highlight;
  }
  :where(.cantos-ui) .cui-select-option[data-active="true"] {
    outline-color: Highlight;
  }
  :where(.cantos-ui) .cui-select-option[aria-disabled="true"] { color: GrayText; }
}
:where(.cantos-ui) .cui-textarea {
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-field-control[readonly] {
  background: var(--cantos-color-surface-container);
}
:where(.cantos-ui) .cui-field-control:disabled {
  color: var(--cantos-color-on-surface-variant);
  background: var(--cantos-color-surface-container);
  opacity: 1;
  cursor: default;
}
:where(.cantos-ui) .cui-field-control[aria-invalid="true"] {
  background: var(--cantos-color-error-container);
  box-shadow: inset 0 calc(-2 * var(--cantos-size-border)) 0 var(--cantos-color-error);
}
:where(.cantos-ui) :is(.cui-field-control, .cui-choice-control, .cui-range-control):focus-visible {
  outline: var(--cantos-size-focus-width) solid var(--cantos-color-focus);
  outline-offset: var(--cantos-size-focus-offset);
}
/* Web-only candidate: keep a two-border focus perimeter, closer to the field, with
   room for both the external label and help/error. No border/size changes on focus.
   Existing AuthTonal and Regular consumers retain the compatibility geometry. */
:where(.cantos-ui) .cui-field[data-variant="auth-tonal-spacious"] {
  gap: var(--cantos-space-sm);
}
:where(.cantos-ui) .cui-field[data-variant="auth-tonal-spacious"] .cui-field-control:focus-visible {
  outline-width: calc(2 * var(--cantos-size-border));
  outline-offset: calc(2 * var(--cantos-size-border));
}
:where(.cantos-ui) :is(.cui-field-help, .cui-field-error) {
  margin: 0;
  font-size: var(--cantos-type-metadata-size);
  line-height: var(--cantos-type-metadata-line-height);
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-field-help {
  color: var(--cantos-web-supporting-text-color);
}
:where(.cantos-ui) .cui-field-error {
  padding: var(--cantos-space-xs) var(--cantos-space-sm);
  border-radius: var(--cantos-web-shape-reading);
  color: var(--cantos-color-error);
  background: var(--cantos-color-error-container);
}
:where(.cantos-ui) :is(.cui-field-help, .cui-field-error)[hidden] { display: none; }
/* The associated native label enlarges the click/touch area without enlarging the glyph. */
:where(.cantos-ui) .cui-choice-label {
  display: flex;
  align-items: center;
  gap: var(--cantos-space-sm);
  min-block-size: var(--cantos-size-control);
  min-inline-size: var(--cantos-size-control);
  cursor: pointer;
}
:where(.cantos-ui) .cui-choice-control {
  flex: 0 0 auto;
  margin: 0;
  inline-size: var(--cantos-size-icon-compact);
  block-size: var(--cantos-size-icon-compact);
  accent-color: var(--cantos-color-primary);
  cursor: inherit;
}
:where(.cantos-ui) .cui-choice[data-state="disabled"] .cui-choice-label,
:where(.cantos-ui) .cui-choice[data-state="loading"] .cui-choice-label {
  cursor: default;
}
:where(.cantos-ui) .cui-choice-control[role="switch"] {
  appearance: none;
  position: relative;
  box-sizing: border-box;
  inline-size: var(--cantos-size-control);
  block-size: var(--cantos-size-icon);
  border: var(--cantos-size-border) solid var(--cantos-color-outline);
  border-radius: var(--cantos-shape-pill);
  background: var(--cantos-color-surface-container);
}
:where(.cantos-ui) .cui-choice-control[role="switch"]::before {
  content: "";
  position: absolute;
  inset-block-start: calc((var(--cantos-size-icon) - var(--cantos-size-icon-compact)) / 2 - var(--cantos-size-border));
  inset-inline-start: calc((var(--cantos-size-icon) - var(--cantos-size-icon-compact)) / 2 - var(--cantos-size-border));
  inline-size: var(--cantos-size-icon-compact);
  block-size: var(--cantos-size-icon-compact);
  border-radius: var(--cantos-shape-pill);
  background: var(--cantos-color-on-surface-variant);
}
:where(.cantos-ui) .cui-choice-control[role="switch"]:checked {
  background: var(--cantos-color-primary);
  border-color: var(--cantos-color-primary);
}
:where(.cantos-ui) .cui-choice-control[role="switch"]:checked::before {
  inset-inline-start: calc(var(--cantos-size-control) - var(--cantos-size-icon-compact) - (var(--cantos-size-icon) - var(--cantos-size-icon-compact)) / 2 - var(--cantos-size-border));
  background: var(--cantos-color-on-primary);
}
:where(.cantos-ui) .cui-choice-control[role="switch"]:disabled {
  background: var(--cantos-color-surface-container);
  border-color: var(--cantos-color-outline);
}
:where(.cantos-ui) .cui-choice-control[role="switch"]:disabled::before {
  background: var(--cantos-color-on-surface-variant);
}
:where(.cantos-ui) .cui-range-control {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--cantos-size-control);
  margin: 0;
  accent-color: var(--cantos-color-primary);
}
/* No continuous motion or custom range keyboard logic; native controls own these interactions. */
@media (forced-colors: active) {
  :where(.cantos-ui) .cui-field-control { border: var(--cantos-size-border) solid FieldText; }
  :where(.cantos-ui) .cui-field-control[aria-invalid="true"]:not(:focus-visible) { outline: var(--cantos-size-border) dashed FieldText; }
  :where(.cantos-ui) .cui-field-control:disabled { color: GrayText; }
  :where(.cantos-ui) .cui-field[data-variant="auth-tonal-spacious"] .cui-field-control:focus-visible { outline-color: Highlight; }
  :where(.cantos-ui) .cui-choice-control[role="switch"] { border-color: ButtonText; }
  :where(.cantos-ui) .cui-choice-control[role="switch"]::before { background: ButtonText; }
  :where(.cantos-ui) .cui-choice-control[role="switch"]:checked { background: Highlight; }
  :where(.cantos-ui) .cui-choice-control[role="switch"]:checked::before { background: HighlightText; }
  :where(.cantos-ui) .cui-choice-control[role="switch"]:disabled::before { background: GrayText; }
}

/* Native dialog owns top-layer containment; no scripted motion or background dismissal. */
:where(.cantos-ui) .cui-dialog {
  box-sizing: border-box;
  inline-size: min(35rem, calc(100% - 2 * var(--cantos-space-md)));
  max-inline-size: calc(100% - 2 * var(--cantos-space-md));
  max-block-size: calc(100dvh - 2 * var(--cantos-space-md));
  margin: auto;
  padding: var(--cantos-space-md);
  border: 0;
  border-radius: var(--cantos-web-shape-overlay);
  background: var(--cantos-color-surface);
  color: var(--cantos-color-on-surface);
  font-family: var(--cantos-type-family-ui);
  font-size: var(--cantos-type-body-size);
  line-height: var(--cantos-type-body-line-height);
  box-shadow: var(--cantos-elevation-overlay);
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--cantos-space-md);
}
:where(.cantos-ui) .cui-dialog::backdrop {
  background: color-mix(in srgb, var(--cantos-color-primary) 32%, transparent);
}
:where(.cantos-ui) .cui-dialog-header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--cantos-space-sm);
  min-inline-size: 0;
  flex-shrink: 0;
}
:where(.cantos-ui) .cui-dialog-title {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
  font-family: var(--cantos-type-family-editorial);
  font-size: var(--cantos-type-title-size);
  line-height: var(--cantos-type-title-line-height);
  font-weight: var(--cantos-type-title-weight);
}
:where(.cantos-ui) .cui-dialog-close {
  flex: 0 1 auto;
  margin-inline-start: auto;
}
:where(.cantos-ui) .cui-dialog-description {
  margin: 0 0 var(--cantos-space-md);
  color: var(--cantos-color-on-surface-variant);
}
:where(.cantos-ui) .cui-dialog-body {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--cantos-size-focus-width) + var(--cantos-size-focus-offset));
  /* Keep focus room inside the content box. Negative margins produce horizontal
     scrollable overflow in Safari's native dialog even when all text fits. */
}
:where(.cantos-ui) .cui-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--cantos-space-sm);
  min-inline-size: 0;
  flex-shrink: 0;
}
@media (min-width: 37.5rem) {
  :where(.cantos-ui) .cui-dialog { padding: var(--cantos-space-lg); }
}
@media (forced-colors: active) {
  :where(.cantos-ui) .cui-dialog { border: var(--cantos-size-border) solid CanvasText; }
}

/* Development gallery only; product pane/navigation rules belong to their apps. */
:where(.cantos-ui) .cui-preview {
  max-inline-size: none;
  min-block-size: 100vh;
  padding-block: var(--cantos-space-lg);
  padding-inline: 0;
}
:where(.cantos-ui) .cui-gallery-page :where(h1, h2, h3, p) {
  margin-block: 0;
  overflow-wrap: anywhere;
}
:where(.cantos-ui) .cui-gallery-header {
  display: grid;
  gap: var(--cantos-space-sm);
}
:where(.cantos-ui) .cui-gallery-eyebrow {
  color: var(--cantos-color-on-surface-variant);
  font-size: var(--cantos-type-metadata-size);
  font-weight: var(--cantos-type-label-weight);
}
:where(.cantos-ui) .cui-gallery-page h2 {
  font-size: var(--cantos-type-title-size);
  line-height: var(--cantos-type-title-line-height);
  font-weight: var(--cantos-type-title-weight);
}
:where(.cantos-ui) .cui-gallery-page h3 {
  font-size: var(--cantos-type-body-size);
  line-height: var(--cantos-type-body-line-height);
  font-weight: var(--cantos-type-label-weight);
}
:where(.cantos-ui) .cui-gallery-note {
  color: var(--cantos-color-on-surface-variant);
  font-size: var(--cantos-type-metadata-size);
  line-height: var(--cantos-type-metadata-line-height);
}
:where(.cantos-ui) .cui-gallery-output {
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--cantos-type-metadata-size);
  line-height: var(--cantos-type-metadata-line-height);
}
:where(.cantos-ui) .cui-gallery-fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
:where(.cantos-ui) .cui-gallery-fieldset legend {
  margin-block-end: var(--cantos-space-sm);
  padding: 0;
  font-weight: var(--cantos-type-label-weight);
}
:where(.cantos-ui) .cui-gallery-icons > span {
  display: inline-flex;
  align-items: center;
  gap: var(--cantos-space-xs);
  padding: var(--cantos-space-xs) var(--cantos-space-sm);
  background: var(--cantos-color-surface-container);
  border-radius: var(--cantos-web-shape-reading);
}
:where(.cantos-ui) .cui-gallery-page article {
  display: grid;
  gap: var(--cantos-space-md);
}
:where(.cantos-ui) .cui-gallery-page footer {
  display: grid;
  justify-items: start;
  gap: var(--cantos-space-sm);
}
:where(.cantos-ui) :where(#gallery-actions, #gallery-fields, #gallery-feedback, #gallery-layout) {
  scroll-margin-block-start: var(--cantos-space-lg);
}
:where(.cantos-ui) .cui-gallery-page .cui-surface > p + p { margin-block-start: var(--cantos-space-sm); }

/* Official SVG lockups retain their natural viewBox ratio and transparent negative space. */
:where(.cantos-ui) .cui-logo {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Scoped Design v2 type roles, independent from regular reader/editor headings. */
.cantos-ui .cui-auth-heading {
  font-family: var(--cantos-type-family-editorial);
  font-size: var(--cantos-type-auth-heading-size);
  font-weight: var(--cantos-type-auth-heading-weight);
  line-height: var(--cantos-type-auth-heading-line-height);
}
.cantos-ui .cui-membership-heading {
  font-family: var(--cantos-type-family-editorial);
  font-size: var(--cantos-type-membership-title-size);
  font-weight: var(--cantos-type-membership-title-weight);
  line-height: var(--cantos-type-membership-title-line-height);
}