/*
 * Component layer - generated stylesheet, shared by every theme.
 *
 * DO NOT EDIT THIS FILE. It is produced from the MUI theme by
 * `pnpm nx run theme-css:export-css` and verified in CI.
 *
 * This file holds no brand values. Every one arrives through a `--theme-*`
 * custom property, so it must be paired with exactly one token file:
 *
 *   <link rel="stylesheet" href="ascent-tokens.css" />
 *   <link rel="stylesheet" href="components.css" />
 *
 * Changing brand means swapping that first file and nothing else.
 */

/* ---------------------------------------------------------------------------
 * Contained reset.
 *
 * Everything is scoped to the brand root classes so it cannot leak into
 * surrounding page chrome (Visualforce layouts, SLDS, or anything else already
 * on the host page). This is deliberately narrower than a global reset: it
 * normalises only what the component layer depends on.
 * ------------------------------------------------------------------------- */

:is(.ascent-theme, .cake-theme),
:is(.ascent-theme, .cake-theme) *,
:is(.ascent-theme, .cake-theme) *::before,
:is(.ascent-theme, .cake-theme) *::after {
  box-sizing: border-box;
}

:is(.ascent-theme, .cake-theme) {
  color: var(--theme-palette-text-primary);
  font-family: var(--theme-typography-font-family);
  font-size: var(--theme-typography-body1-font-size);
  font-weight: var(--theme-typography-body1-font-weight);
  line-height: var(--theme-typography-body1-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:is(.ascent-theme, .cake-theme) h1,
:is(.ascent-theme, .cake-theme) h2,
:is(.ascent-theme, .cake-theme) h3,
:is(.ascent-theme, .cake-theme) h4,
:is(.ascent-theme, .cake-theme) h5,
:is(.ascent-theme, .cake-theme) h6,
:is(.ascent-theme, .cake-theme) p,
:is(.ascent-theme, .cake-theme) ul,
:is(.ascent-theme, .cake-theme) ol,
:is(.ascent-theme, .cake-theme) dl,
:is(.ascent-theme, .cake-theme) figure,
:is(.ascent-theme, .cake-theme) blockquote {
  margin: 0;
}

:is(.ascent-theme, .cake-theme) table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 * Form controls do not inherit typography by default. Without this, every
 * font-related token applied to a container is silently ignored inside inputs,
 * which is a notoriously easy regression to miss.
 */
:is(.ascent-theme, .cake-theme) button,
:is(.ascent-theme, .cake-theme) input,
:is(.ascent-theme, .cake-theme) optgroup,
:is(.ascent-theme, .cake-theme) select,
:is(.ascent-theme, .cake-theme) textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Component layer.
 *
 * Hand-authored, because MUI's own component CSS lives in JavaScript `styled()`
 * calls gated on `ownerState`; the theme's `styleOverrides` are only deltas
 * against that baseline and cannot be serialised into a complete stylesheet on
 * their own.
 *
 * This file is shared by every brand and emitted once. Anything that varies by
 * brand must arrive through `var(--theme-*)`, supplied by whichever
 * `<brand>-tokens.css` the page loads, with `var(--token, fallback)` where a
 * brand legitimately declares nothing. A literal that varies by brand would
 * silently encode one brand's measurements for all of them — that is exactly
 * how Cake broke the first time.
 *
 * The literals that remain are deliberate: they come from component
 * `styleOverrides` that are shared by every brand and therefore beat the
 * per-brand typography variants. Each one names its source in a comment. Before
 * replacing a literal with a token, check whether a component override wins
 * over that token — if it does, the token is the wrong value, however
 * plausible it looks.
 *
 * Selectors are prefixed with `:is(.ascent-theme, .cake-theme)` for two reasons:
 * it keeps the rules from escaping the opted-in subtree, and it raises
 * specificity above the element-level reset (`... button { font: inherit }`
 * would otherwise beat a bare `.button`). `:is()` scores as its most specific
 * argument, so this matches a plain root class and shifts nothing.
 * ------------------------------------------------------------------------- */

/* --- Button ---------------------------------------------------------------
 *
 * Markup requires a variant, a colour and a size:
 *
 *   <button class="button outlined secondary medium">
 *     Save
 *   </button>
 *
 * MUI's ripple is intentionally not reproduced.
 */

:is(.ascent-theme, .cake-theme) .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  border: 0;
  border-radius: var(--theme-shape-border-radius);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  outline: 0;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--theme-typography-button-font-family);
  font-weight: var(--theme-typography-button-font-weight);
  line-height: var(--theme-typography-button-line-height);
  /* MUI's Button is styled(ButtonBase), and its own class spreads
     typography.button -- so when a brand declares button.letterSpacing it wins
     over MuiButtonBase.styleOverrides.root. When the brand declares none (Cake
     does not), the ButtonBase override shows through instead. The fallback is
     therefore that override's 0.04rem, not `normal`. See
     libs/ascent-theme/src/lib/overrides/button-base.ts. */
  letter-spacing: var(--theme-typography-button-letter-spacing, 0.4px);
  text-transform: var(--theme-typography-button-text-transform);
  transition: background-color var(--theme-transitions-duration-short)
      var(--theme-transitions-easing-ease-in-out) 0ms,
    box-shadow var(--theme-transitions-duration-short)
      var(--theme-transitions-easing-ease-in-out) 0ms,
    border-color var(--theme-transitions-duration-short)
      var(--theme-transitions-easing-ease-in-out) 0ms,
    color var(--theme-transitions-duration-short)
      var(--theme-transitions-easing-ease-in-out) 0ms;
}

:is(.ascent-theme, .cake-theme) .button::-moz-focus-inner {
  border-style: none;
}

/*
 * --- Button sizes ---
 *
 * The font sizes below are literals on purpose. `MuiButton.styleOverrides`
 * (`libs/ascent-theme/src/lib/overrides/button.ts`) pins `sizeMedium` to
 * 1.6rem and `sizeSmall` to 1.4rem, and component overrides beat the
 * `typography.button` variant. Cake declares `typography.button.fontSize:
 * "1.4rem"`, but MUI never renders it for a button, so reading the token here
 * would make this stylesheet disagree with the components it is mirroring.
 */

:is(.ascent-theme, .cake-theme) .button.medium {
  min-width: 150px;
  padding: var(--theme-spacing-1) var(--theme-spacing-4);
  font-size: 16px;
}

:is(.ascent-theme, .cake-theme) .button.small {
  min-width: 50px;
  padding: var(--theme-spacing-0-5) var(--theme-spacing-2);
  font-size: 14px;
}

/*
 * Outlined buttons carry a 1px border, so their padding is reduced by 1px to
 * keep the footprint identical across variants.
 */
:is(.ascent-theme, .cake-theme) .button.outlined.medium {
  padding: 7px 31px;
}

:is(.ascent-theme, .cake-theme) .button.outlined.small {
  padding: 3px 15px;
}

/* --- Contained --- */

:is(.ascent-theme, .cake-theme) .button.contained {
  box-shadow: var(--theme-shadows-2);
}

:is(.ascent-theme, .cake-theme) .button.contained:hover {
  box-shadow: var(--theme-shadows-4);
}

:is(.ascent-theme, .cake-theme) .button.contained:active {
  box-shadow: var(--theme-shadows-8);
}

:is(.ascent-theme, .cake-theme) .button.contained:focus-visible {
  box-shadow: var(--theme-shadows-6);
}

:is(.ascent-theme, .cake-theme) .button.contained.primary {
  background-color: var(--theme-palette-primary-main);
  color: var(--theme-palette-primary-extra-light);
}

:is(.ascent-theme, .cake-theme) .button.contained.primary:hover {
  background-color: var(--theme-palette-primary-dark);
}

:is(.ascent-theme, .cake-theme) .button.contained.secondary {
  background-color: var(--theme-palette-secondary-main);
  color: var(--theme-palette-secondary-extra-light);
}

:is(.ascent-theme, .cake-theme) .button.contained.secondary:hover {
  background-color: var(--theme-palette-secondary-dark);
}

:is(.ascent-theme, .cake-theme) .button.contained.error {
  background-color: var(--theme-palette-error-main);
  color: var(--theme-palette-error-extra-light);
}

:is(.ascent-theme, .cake-theme) .button.contained.error:hover {
  background-color: var(--theme-palette-error-dark);
}

/* --- Outlined --- */

:is(.ascent-theme, .cake-theme) .button.outlined {
  background-color: var(--theme-palette-common-white);
  border: 1px solid currentColor;
}

:is(.ascent-theme, .cake-theme) .button.outlined.primary {
  border-color: var(--theme-palette-primary-outlined-border);
  color: var(--theme-palette-primary-main);
}

:is(.ascent-theme, .cake-theme) .button.outlined.primary:hover {
  background-color: var(--theme-palette-primary-extra-light);
  border-color: var(--theme-palette-primary-main);
  color: var(--theme-palette-primary-dark);
}

:is(.ascent-theme, .cake-theme) .button.outlined.secondary {
  border-color: var(--theme-palette-secondary-outlined-border);
  color: var(--theme-palette-secondary-main);
}

:is(.ascent-theme, .cake-theme) .button.outlined.secondary:hover {
  background-color: var(--theme-palette-secondary-extra-light);
  border-color: var(--theme-palette-secondary-main);
  color: var(--theme-palette-secondary-dark);
}

:is(.ascent-theme, .cake-theme) .button.outlined.error {
  border-color: var(--theme-palette-error-outlined-border);
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .button.outlined.error:hover {
  background-color: var(--theme-palette-error-extra-light);
  border-color: var(--theme-palette-error-main);
  color: var(--theme-palette-error-dark);
}

/* --- Text --- */

:is(.ascent-theme, .cake-theme) .button.text.primary {
  color: var(--theme-palette-primary-main);
}

:is(.ascent-theme, .cake-theme) .button.text.primary:hover {
  background-color: var(--theme-palette-primary-extra-light);
  color: var(--theme-palette-primary-dark);
}

:is(.ascent-theme, .cake-theme) .button.text.secondary {
  color: var(--theme-palette-secondary-main);
}

:is(.ascent-theme, .cake-theme) .button.text.secondary:hover {
  background-color: var(--theme-palette-secondary-extra-light);
  color: var(--theme-palette-secondary-dark);
}

:is(.ascent-theme, .cake-theme) .button.text.error {
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .button.text.error:hover {
  background-color: var(--theme-palette-error-extra-light);
  color: var(--theme-palette-error-dark);
}

/* --- Disabled ---
 *
 * These selectors repeat `.button` so they outrank the two-class colour
 * rules above, and are declared last so they win the tie against the equally
 * specific hover rules. `pointer-events: none` additionally means hover can
 * never fire on a disabled control.
 *
 * The modifier class exists for elements that cannot carry the `disabled`
 * attribute, such as an anchor styled as a button.
 */

:is(.ascent-theme, .cake-theme) .button:disabled,
:is(.ascent-theme, .cake-theme) .button.disabled {
  cursor: default;
  pointer-events: none;
}

:is(.ascent-theme, .cake-theme) .button.contained:disabled,
:is(.ascent-theme, .cake-theme) .button.contained.disabled {
  background-color: var(--theme-palette-neutral-light);
  box-shadow: var(--theme-shadows-0);
  color: var(--theme-palette-neutral-medium);
}

:is(.ascent-theme, .cake-theme) .button.outlined:disabled,
:is(.ascent-theme, .cake-theme) .button.outlined.disabled {
  border-color: var(--theme-palette-neutral-light);
  color: var(--theme-palette-neutral-medium);
}

:is(.ascent-theme, .cake-theme) .button.text:disabled,
:is(.ascent-theme, .cake-theme) .button.text.disabled {
  color: var(--theme-palette-neutral-medium);
}

/* --- Typography -----------------------------------------------------------
 *
 * MUI's Typography is just `margin: 0` plus `theme.typography[variant]`, so the
 * whole family reduces to token lookups. Use the tag MUI's `variantMapping`
 * would have picked (`subtitle1`/`subtitle2` -> h6, `body*` -> p, `caption` and
 * `overline` -> span) so UA defaults line up too.
 */

:is(.ascent-theme, .cake-theme) .h1,
:is(.ascent-theme, .cake-theme) .h2,
:is(.ascent-theme, .cake-theme) .h3,
:is(.ascent-theme, .cake-theme) .h4,
:is(.ascent-theme, .cake-theme) .h5,
:is(.ascent-theme, .cake-theme) .h6,
:is(.ascent-theme, .cake-theme) .subtitle1,
:is(.ascent-theme, .cake-theme) .subtitle2,
:is(.ascent-theme, .cake-theme) .body1,
:is(.ascent-theme, .cake-theme) .body2,
:is(.ascent-theme, .cake-theme) .caption,
:is(.ascent-theme, .cake-theme) .overline {
  margin: 0;
}

:is(.ascent-theme, .cake-theme) .h1 {
  font-family: var(--theme-typography-h1-font-family);
  font-size: var(--theme-typography-h1-font-size);
  font-weight: var(--theme-typography-h1-font-weight);
  letter-spacing: var(--theme-typography-h1-letter-spacing, normal);
  line-height: var(--theme-typography-h1-line-height);
}

:is(.ascent-theme, .cake-theme) .h2 {
  font-family: var(--theme-typography-h2-font-family);
  font-size: var(--theme-typography-h2-font-size);
  font-weight: var(--theme-typography-h2-font-weight);
  letter-spacing: var(--theme-typography-h2-letter-spacing, normal);
  line-height: var(--theme-typography-h2-line-height);
}

:is(.ascent-theme, .cake-theme) .h3 {
  font-family: var(--theme-typography-h3-font-family);
  font-size: var(--theme-typography-h3-font-size);
  font-weight: var(--theme-typography-h3-font-weight);
  letter-spacing: var(--theme-typography-h3-letter-spacing, normal);
  line-height: var(--theme-typography-h3-line-height);
}

:is(.ascent-theme, .cake-theme) .h4 {
  font-family: var(--theme-typography-h4-font-family);
  font-size: var(--theme-typography-h4-font-size);
  font-weight: var(--theme-typography-h4-font-weight);
  letter-spacing: var(--theme-typography-h4-letter-spacing, normal);
  line-height: var(--theme-typography-h4-line-height);
}

:is(.ascent-theme, .cake-theme) .h5 {
  font-family: var(--theme-typography-h5-font-family);
  font-size: var(--theme-typography-h5-font-size);
  font-weight: var(--theme-typography-h5-font-weight);
  letter-spacing: var(--theme-typography-h5-letter-spacing, normal);
  line-height: var(--theme-typography-h5-line-height);
}

:is(.ascent-theme, .cake-theme) .h6 {
  font-family: var(--theme-typography-h6-font-family);
  font-size: var(--theme-typography-h6-font-size);
  font-weight: var(--theme-typography-h6-font-weight);
  letter-spacing: var(--theme-typography-h6-letter-spacing, normal);
  line-height: var(--theme-typography-h6-line-height);
}

:is(.ascent-theme, .cake-theme) .subtitle1 {
  font-family: var(--theme-typography-subtitle1-font-family);
  font-size: var(--theme-typography-subtitle1-font-size);
  font-weight: var(--theme-typography-subtitle1-font-weight);
  letter-spacing: var(--theme-typography-subtitle1-letter-spacing, normal);
  line-height: var(--theme-typography-subtitle1-line-height);
}

:is(.ascent-theme, .cake-theme) .subtitle2 {
  font-family: var(--theme-typography-subtitle2-font-family);
  font-size: var(--theme-typography-subtitle2-font-size);
  font-weight: var(--theme-typography-subtitle2-font-weight);
  letter-spacing: var(--theme-typography-subtitle2-letter-spacing, normal);
  line-height: var(--theme-typography-subtitle2-line-height);
}

:is(.ascent-theme, .cake-theme) .body1 {
  font-family: var(--theme-typography-body1-font-family);
  font-size: var(--theme-typography-body1-font-size);
  font-weight: var(--theme-typography-body1-font-weight);
  letter-spacing: var(--theme-typography-body1-letter-spacing, normal);
  line-height: var(--theme-typography-body1-line-height);
}

:is(.ascent-theme, .cake-theme) .body2 {
  font-family: var(--theme-typography-body2-font-family);
  font-size: var(--theme-typography-body2-font-size);
  font-weight: var(--theme-typography-body2-font-weight);
  letter-spacing: var(--theme-typography-body2-letter-spacing, normal);
  line-height: var(--theme-typography-body2-line-height);
}

:is(.ascent-theme, .cake-theme) .caption {
  font-family: var(--theme-typography-caption-font-family);
  font-size: var(--theme-typography-caption-font-size);
  font-weight: var(--theme-typography-caption-font-weight);
  letter-spacing: var(--theme-typography-caption-letter-spacing, normal);
  line-height: var(--theme-typography-caption-line-height);
}

:is(.ascent-theme, .cake-theme) .overline {
  font-family: var(--theme-typography-overline-font-family);
  font-size: var(--theme-typography-overline-font-size);
  font-weight: var(--theme-typography-overline-font-weight);
  letter-spacing: var(--theme-typography-overline-letter-spacing, normal);
  line-height: var(--theme-typography-overline-line-height);
  text-transform: var(--theme-typography-overline-text-transform);
}

/* --- Link -----------------------------------------------------------------
 *
 * MUI's Link defaults to `variant="inherit"`, so it contributes no typography
 * of its own; only colour, underline behaviour and the theme's hover treatment.
 */

:is(.ascent-theme, .cake-theme) .link {
  cursor: pointer;
}

:is(.ascent-theme, .cake-theme) .link:hover {
  text-shadow: 0 0 1px darkgray;
}

:is(.ascent-theme, .cake-theme) .link.primary {
  color: var(--theme-palette-primary-main);
}

:is(.ascent-theme, .cake-theme) .link.secondary {
  color: var(--theme-palette-secondary-main);
}

:is(.ascent-theme, .cake-theme) .link.error {
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .link.underline-always {
  text-decoration: underline;
}

/* MUI tints the underline to 40% of the link colour, then restores it on hover. */
:is(.ascent-theme, .cake-theme) .link.underline-always.primary {
  text-decoration-color: var(--theme-palette-primary-underline);
}

:is(.ascent-theme, .cake-theme) .link.underline-always.secondary {
  text-decoration-color: var(--theme-palette-secondary-underline);
}

:is(.ascent-theme, .cake-theme) .link.underline-always.error {
  text-decoration-color: var(--theme-palette-error-underline);
}

:is(.ascent-theme, .cake-theme) .link.underline-always:hover {
  text-decoration-color: inherit;
}

:is(.ascent-theme, .cake-theme) .link.underline-none,
:is(.ascent-theme, .cake-theme) .link.underline-hover {
  text-decoration: none;
}

:is(.ascent-theme, .cake-theme) .link.underline-hover:hover {
  text-decoration: underline;
}

/* --- Table ----------------------------------------------------------------
 *
 * Cells are matched on the element rather than a class: a Visualforce author
 * writing a table should not have to decorate every `th` and `td`.
 */

:is(.ascent-theme, .cake-theme) .table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

:is(.ascent-theme, .cake-theme) .table th,
:is(.ascent-theme, .cake-theme) .table td {
  display: table-cell;
  padding: var(--theme-spacing-2);
  border-bottom: 1px solid var(--theme-palette-divider-opaque);
  color: var(--theme-palette-text-primary);
  font-family: var(--theme-typography-body2-font-family);
  font-size: var(--theme-typography-body2-font-size);
  font-weight: var(--theme-typography-font-weight-regular);
  letter-spacing: var(--theme-typography-body2-letter-spacing, normal);
  /* MuiTableCell override (overrides/table-cell.ts), same for both brands. */
  line-height: 1.2;
  text-align: left;
  vertical-align: inherit;
}

:is(.ascent-theme, .cake-theme) .table th {
  color: var(--theme-palette-primary-main);
  font-weight: var(--theme-typography-font-weight-bold);
}

:is(.ascent-theme, .cake-theme) .table.small th,
:is(.ascent-theme, .cake-theme) .table.small td {
  padding: 6px var(--theme-spacing-2);
}

/* --- Card -----------------------------------------------------------------
 *
 * A Card is a Paper at elevation 1 plus the theme's own padding. The header and
 * content slots are zeroed by the theme, so their only job is layout.
 */

:is(.ascent-theme, .cake-theme) .card {
  overflow: hidden;
  padding: var(--theme-spacing-2);
  border-radius: var(--theme-shape-border-radius);
  background-color: var(--theme-palette-background-paper);
  box-shadow: var(--theme-shadows-1);
  color: var(--theme-palette-text-primary);
}

:is(.ascent-theme, .cake-theme) .card-header {
  display: flex;
  align-items: center;
  padding: 0 0 var(--theme-spacing-2);
}

:is(.ascent-theme, .cake-theme) .card-header-content {
  flex: 1 1 auto;
}

:is(.ascent-theme, .cake-theme) .card-content {
  padding: 0;
}

:is(.ascent-theme, .cake-theme) .card-content:last-child {
  padding-bottom: 0;
}

/* --- Alert ----------------------------------------------------------------
 *
 * The severity icon is deliberately absent: it is an MUI SVG with no plain-HTML
 * equivalent, so alerts here are text-only.
 */

:is(.ascent-theme, .cake-theme) .alert {
  display: flex;
  padding: 14px var(--theme-spacing-2);
  border-radius: var(--theme-shape-border-radius);
  background-color: transparent;
  font-family: var(--theme-typography-body2-font-family);
  font-size: var(--theme-typography-body2-font-size);
  font-weight: var(--theme-typography-body2-font-weight);
  letter-spacing: var(--theme-typography-body2-letter-spacing, normal);
  line-height: var(--theme-typography-body2-line-height);
}

:is(.ascent-theme, .cake-theme) .alert-message {
  min-width: 0;
  overflow: auto;
  padding: var(--theme-spacing-1) 0;
}

:is(.ascent-theme, .cake-theme) .alert.standard.error {
  background-color: var(--theme-palette-error-extra-light);
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .alert.standard.warning {
  background-color: var(--theme-palette-warning-extra-light);
  color: var(--theme-palette-warning-dark);
}

:is(.ascent-theme, .cake-theme) .alert.standard.info {
  background-color: var(--theme-palette-info-extra-light);
  color: var(--theme-palette-info-dark);
}

:is(.ascent-theme, .cake-theme) .alert.standard.success {
  background-color: var(--theme-palette-success-extra-light);
  color: var(--theme-palette-success-extra-dark);
}

/* MUI's filled Alert bumps the weight to fontWeightMedium; the standard and
   outlined variants inherit the body weight. */

:is(.ascent-theme, .cake-theme) .alert.filled {
  font-weight: var(--theme-typography-font-weight-medium);
}

:is(.ascent-theme, .cake-theme) .alert.filled.error {
  background-color: var(--theme-palette-error-main);
  color: var(--theme-palette-error-extra-light);
}

:is(.ascent-theme, .cake-theme) .alert.filled.warning {
  background-color: var(--theme-palette-warning-main);
  color: var(--theme-palette-warning-extra-dark);
}

:is(.ascent-theme, .cake-theme) .alert.filled.info {
  background-color: var(--theme-palette-info-main);
  color: var(--theme-palette-info-extra-dark);
}

:is(.ascent-theme, .cake-theme) .alert.filled.success {
  background-color: var(--theme-palette-success-main);
  color: var(--theme-palette-success-extra-dark);
}

:is(.ascent-theme, .cake-theme) .alert.outlined {
  border: 1px solid currentColor;
}

:is(.ascent-theme, .cake-theme) .alert.outlined.error {
  border-color: var(--theme-palette-error-main);
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .alert.outlined.warning {
  border-color: var(--theme-palette-warning-main);
  color: var(--theme-palette-warning-dark);
}

:is(.ascent-theme, .cake-theme) .alert.outlined.info {
  border-color: var(--theme-palette-info-main);
  color: var(--theme-palette-info-dark);
}

:is(.ascent-theme, .cake-theme) .alert.outlined.success {
  border-color: var(--theme-palette-success-main);
  color: var(--theme-palette-success-extra-dark);
}

/* --- Chip ----------------------------------------------------------------- */

:is(.ascent-theme, .cake-theme) .chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 64px;
  outline: 0;
  cursor: default;
  font-family: var(--theme-typography-font-family);
  /*
   * MUI's pxToRem(13) under a theme whose `fontSize` is 10 rather than 14, which
   * scales it to 71%. The odd number mirrors what the apps actually render; it
   * becomes 13px when that theme bug is fixed. See docs/THEME-CSS-FOLLOWUPS.md.
   */
  font-size: 9.28571px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

:is(.ascent-theme, .cake-theme) .chip-label {
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.ascent-theme, .cake-theme) .chip.medium {
  height: auto;
  padding: 4px 8px;
}

/* Chip label metrics are MuiChip overrides, identical for both brands. */
:is(.ascent-theme, .cake-theme) .chip.medium .chip-label {
  font-size: 14px;
  font-weight: var(--theme-typography-font-weight-bold);
  letter-spacing: 0.14px;
  line-height: 20px;
}

:is(.ascent-theme, .cake-theme) .chip.small {
  height: 24px;
  padding: 2px 8px;
}

/* Small chip labels inherit the root size; only medium is sized explicitly. */

/* Outlined chips share the text colour with their border. */

:is(.ascent-theme, .cake-theme) .chip.outlined {
  border: 0.5px solid;
}

:is(.ascent-theme, .cake-theme) .chip.outlined.default {
  border-color: var(--theme-palette-neutral-dark);
  background-color: var(--theme-color-neutral-100);
  color: var(--theme-palette-text-primary);
}

:is(.ascent-theme, .cake-theme) .chip.outlined.primary {
  border-color: var(--theme-palette-primary-dark);
  background-color: var(--theme-palette-primary-extra-light);
  color: var(--theme-palette-primary-dark);
}

:is(.ascent-theme, .cake-theme) .chip.outlined.secondary {
  border-color: var(--theme-palette-secondary-dark);
  background-color: var(--theme-palette-secondary-extra-light);
  color: var(--theme-palette-secondary-dark);
}

:is(.ascent-theme, .cake-theme) .chip.outlined.error {
  border-color: var(--theme-palette-error-main);
  background-color: var(--theme-palette-error-extra-light);
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .chip.outlined.warning {
  border-color: var(--theme-palette-warning-dark);
  background-color: var(--theme-palette-warning-extra-light);
  color: var(--theme-palette-warning-dark);
}

:is(.ascent-theme, .cake-theme) .chip.outlined.info {
  border-color: var(--theme-palette-info-dark);
  background-color: var(--theme-palette-info-extra-light);
  color: var(--theme-palette-info-dark);
}

:is(.ascent-theme, .cake-theme) .chip.outlined.success {
  border-color: var(--theme-palette-success-dark);
  background-color: var(--theme-palette-success-extra-light);
  color: var(--theme-palette-success-extra-dark);
}

/* Filled chips keep the outlined text colour but sit on the 100 ramp step.
   The background comes from `filledBackgrounds` in
   libs/ascent-theme/src/lib/overrides/chip.ts, which is a STATIC map built from
   the imported ramps -- not from the palette -- so MUI paints the same colour
   for every brand. Primary and secondary are therefore literals here; using the
   brand token would render Cake's own ramp, which MUI never does. The remaining
   colours stay tokenised only because each brand's token happens to equal the
   same static ramp step today. (The text colour, by contrast, does come from
   the palette via getChipColors, so it stays tokenised.) */

:is(.ascent-theme, .cake-theme) .chip.filled.default {
  background-color: var(--theme-palette-neutral-light);
  color: var(--theme-palette-text-primary);
}

:is(.ascent-theme, .cake-theme) .chip.filled.primary {
  /* paPrimary[100] */
  background-color: #ccdee5;
  color: var(--theme-palette-primary-dark);
}

:is(.ascent-theme, .cake-theme) .chip.filled.secondary {
  /* paSecondary[100] */
  background-color: #ceeae8;
  color: var(--theme-palette-secondary-dark);
}

:is(.ascent-theme, .cake-theme) .chip.filled.error {
  background-color: var(--theme-color-error-100);
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .chip.filled.warning {
  background-color: var(--theme-color-warning-100);
  color: var(--theme-palette-warning-dark);
}

:is(.ascent-theme, .cake-theme) .chip.filled.info {
  background-color: var(--theme-color-info-100);
  color: var(--theme-palette-info-dark);
}

:is(.ascent-theme, .cake-theme) .chip.filled.success {
  background-color: var(--theme-color-success-100);
  color: var(--theme-palette-success-extra-dark);
}

/* --- Badge ----------------------------------------------------------------
 *
 * The anchor element is whatever the author wraps; only the badge bubble is
 * styled here.
 */

:is(.ascent-theme, .cake-theme) .badge {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
}

:is(.ascent-theme, .cake-theme) .badge-content {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 0 6.5px;
  border-radius: 64px;
  font-family: var(--theme-typography-font-family);
  /* Badge metrics mirror the MuiChip label; identical for both brands. */
  font-size: 14px;
  font-weight: var(--theme-typography-font-weight-bold);
  letter-spacing: 0.14px;
  line-height: 20px;
  transform: scale(1) translate(25%, -50%);
  transform-origin: 100% 0%;
}

:is(.ascent-theme, .cake-theme) .badge-content.dot {
  width: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

:is(.ascent-theme, .cake-theme) .badge-content.primary {
  background-color: var(--theme-palette-primary-main);
  color: #ffffff;
}

:is(.ascent-theme, .cake-theme) .badge-content.secondary {
  background-color: var(--theme-palette-secondary-main);
  color: #ffffff;
}

:is(.ascent-theme, .cake-theme) .badge-content.error {
  background-color: var(--theme-palette-error-main);
  color: var(--theme-palette-error-extra-light);
}

:is(.ascent-theme, .cake-theme) .badge-content.warning {
  background-color: var(--theme-palette-warning-main);
  color: var(--theme-palette-neutral-extra-dark);
}

:is(.ascent-theme, .cake-theme) .badge-content.info {
  background-color: var(--theme-palette-info-main);
  color: var(--theme-palette-info-extra-dark);
}

:is(.ascent-theme, .cake-theme) .badge-content.success {
  background-color: var(--theme-palette-success-main);
  color: var(--theme-palette-success-extra-dark);
}

/* --- Form controls ---------------------------------------------------------
 *
 * The theme defaults TextField to the `standard` variant with the underline
 * disabled and draws the border on the input wrapper from the MuiFormControl
 * override, so none of MUI's notched-outline fieldset/legend markup is needed.
 *
 * Structure:
 *   .form-control > .form-label
 *                        > .input > input.input-field
 *                        > .form-helper-text
 */

:is(.ascent-theme, .cake-theme) .form-control {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
}

/*
 * MuiFormLabel spreads `typography.body1`, then the MuiFormControl override in
 * `libs/ascent-theme/src/lib/overrides/form-control.ts` pins the descendant
 * label to 1.4rem / 1.2. Both brands share that override, so the font-size and
 * line-height are literals; the letter-spacing still comes from body1.
 */
:is(.ascent-theme, .cake-theme) .form-label {
  display: block;
  color: var(--theme-palette-text-primary);
  font-family: var(--theme-typography-font-family);
  font-size: 14px;
  font-weight: var(--theme-typography-font-weight-regular);
  line-height: 1.2;
  letter-spacing: var(--theme-typography-body1-letter-spacing, normal);
  margin-bottom: 4px;
  padding: 0;
}

:is(.ascent-theme, .cake-theme) .input {
  display: inline-flex;
  position: relative;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--theme-palette-primary-light);
  border-radius: 4px;
  outline: none;
  background-color: #fff;
  color: var(--theme-palette-text-primary);
  cursor: text;
  font-family: var(--theme-typography-font-family);
  font-size: var(--theme-typography-body1-font-size);
  /* MuiInputBase pins this line-height in MUI core; it is not a theme value. */
  line-height: 1.4375em;
}

:is(.ascent-theme, .cake-theme) .input-field {
  box-sizing: content-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  outline: 0;
  background: none;
  color: currentColor;
  font: inherit;
  letter-spacing: inherit;
}

/*
 * MuiFormHelperText spreads `typography.caption`, and its own styleOverride
 * pins line-height to 1.2 for both brands.
 */
:is(.ascent-theme, .cake-theme) .form-helper-text {
  color: var(--theme-palette-text-secondary);
  font-family: var(--theme-typography-font-family);
  font-size: var(--theme-typography-caption-font-size);
  font-weight: var(--theme-typography-font-weight-regular);
  line-height: 1.2;
  letter-spacing: var(--theme-typography-caption-letter-spacing, normal);
  margin: 3px 0 0;
  text-align: left;
}

/* Hover and focus both promote the border to primary.main; focus adds the ring. */

:is(.ascent-theme, .cake-theme) .input:hover {
  border-color: var(--theme-palette-primary-main);
}

:is(.ascent-theme, .cake-theme) .input:has(> .input-field:focus) {
  border-color: var(--theme-palette-primary-main);
  box-shadow: 0 0 0 1px var(--theme-palette-primary-main);
}

/* The label follows the input's state, but only while the field is not in
   error — mirrors the guards in the MuiFormControl override. */

:is(.ascent-theme, .cake-theme)
  .form-control:not(.error)
  .form-label:has(~ .input:hover),
:is(.ascent-theme, .cake-theme)
  .form-control:not(.error):focus-within
  .form-label {
  color: var(--theme-palette-primary-main);
}

/* Error */

:is(.ascent-theme, .cake-theme) .form-control.error .form-label,
:is(.ascent-theme, .cake-theme) .form-control.error .form-helper-text {
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .form-control.error .input {
  border-color: var(--theme-palette-error-light);
}

:is(.ascent-theme, .cake-theme) .form-control.error .input:hover {
  border-color: var(--theme-palette-error-main);
}

/* The override's `.Mui-error.Mui-focused` branch asks for error.dark here, but
   its `:has(> input:focus).Mui-error` branch is more specific and wins, so the
   rendered ring is error.main. */

:is(.ascent-theme, .cake-theme)
  .form-control.error
  .input:has(> .input-field:focus) {
  border-color: var(--theme-palette-error-main);
  box-shadow: 0 0 0 1px var(--theme-palette-error-main);
}

/* Disabled */

:is(.ascent-theme, .cake-theme) .form-control.disabled .input {
  background-color: transparent;
  border-color: var(--theme-palette-neutral-main);
  color: var(--theme-palette-neutral-main);
  cursor: default;
  pointer-events: none;
}

:is(.ascent-theme, .cake-theme) .form-control.disabled .form-label,
:is(.ascent-theme, .cake-theme) .form-control.disabled .form-helper-text,
:is(.ascent-theme, .cake-theme) .form-control.disabled .input-field {
  color: var(--theme-palette-neutral-main);
  -webkit-text-fill-color: var(--theme-palette-neutral-main);
}

/* --- Checkbox and radio ----------------------------------------------------
 *
 * Deliberately NOT computed-style parity tested, and deliberately not a
 * reproduction of MUI's markup: MUI draws the box and the dot as inline SVG
 * paths inside a ButtonBase span. Visualforce pages emit native inputs, and
 * there is no honest way to compare the computed styles of an <svg> against an
 * <input type="checkbox">. These rules instead brand the native control, which
 * is what a VF author will actually reach for. They approximate the MUI look
 * rather than matching it pixel for pixel.
 */

:is(.ascent-theme, .cake-theme) .checkbox,
:is(.ascent-theme, .cake-theme) .radio {
  accent-color: var(--theme-palette-primary-main);
  cursor: pointer;
  flex-shrink: 0;
}

/*
 * Sized to what MUI paints today rather than what it intends. Its icon is
 * shrunk to 17.14px by the typography.fontSize bug, and the two icons fill
 * different shares of their 24-unit viewBox: the checkbox 18 units, the radio
 * 20. The margin is MUI's 9px ButtonBase padding plus whatever inset that
 * share leaves over. All four numbers become round once the bug is fixed; see
 * docs/THEME-CSS-FOLLOWUPS.md.
 */
:is(.ascent-theme, .cake-theme) .checkbox {
  width: 12.86px;
  height: 12.86px;
  margin: 0 11.14px 0 0;
}

:is(.ascent-theme, .cake-theme) .radio {
  width: 14.28px;
  height: 14.28px;
  margin: 0 10.43px 0 0;
}

:is(.ascent-theme, .cake-theme) .checkbox.secondary,
:is(.ascent-theme, .cake-theme) .radio.secondary {
  accent-color: var(--theme-palette-secondary-main);
}

:is(.ascent-theme, .cake-theme) .checkbox.error,
:is(.ascent-theme, .cake-theme) .radio.error {
  accent-color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .checkbox:disabled,
:is(.ascent-theme, .cake-theme) .radio:disabled {
  accent-color: var(--theme-palette-neutral-main);
  cursor: default;
}

:is(.ascent-theme, .cake-theme) .form-control-label {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  cursor: pointer;
  color: var(--theme-palette-text-primary);
  font-family: var(--theme-typography-font-family);
  font-size: var(--theme-typography-body1-font-size);
  line-height: var(--theme-typography-body1-line-height);
}

:is(.ascent-theme, .cake-theme) .form-control-label.error {
  color: var(--theme-palette-error-main);
}

:is(.ascent-theme, .cake-theme) .form-control-label.disabled {
  color: var(--theme-palette-neutral-main);
  cursor: default;
}