/* Crunch Design System — Component Styles
   Consumes semantic tokens from tokens/tokens.css.
   All classes use the `cr-` prefix. */

/* ============================================================
   BUTTON  (.cr-btn)
   Figma: button (key a42b3b6e9de871ccfa707edb4afdd7a2331756e9)
   ============================================================ */

.cr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-padding-tiny);
  height: var(--size-control-height-default);
  padding-inline: var(--size-padding-small);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--border-radius-control);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.cr-btn:focus-visible {
  outline: var(--border-width-large) solid var(--border-color-emphasis);
  outline-offset: var(--border-width-large);
}

.cr-btn:disabled,
.cr-btn[aria-disabled="true"] {
  opacity: 0.24;
  pointer-events: none;
}

/* Size: small */
.cr-btn--small {
  height: var(--size-control-height-small);
  padding-inline: var(--size-padding-tiny);
  font-size: var(--text-size-paragraph-small);
}

/* --- Type variants --- */

.cr-btn--primary {
  background-color: var(--action-primary-default);
  color: var(--action-primary-text);
}
.cr-btn--primary:hover { background-color: var(--action-primary-hover); }
.cr-btn--primary:active { background-color: var(--action-primary-active); }

.cr-btn--secondary {
  background-color: var(--action-secondary-default);
  color: var(--action-secondary-text);
}
.cr-btn--secondary:hover { background-color: var(--action-secondary-hover); }
.cr-btn--secondary:active { background-color: var(--action-secondary-active); }

.cr-btn--floating {
  background-color: var(--action-floating-default);
  color: var(--action-floating-text);
}
.cr-btn--floating:hover { background-color: var(--action-floating-hover); }
.cr-btn--floating:active { background-color: var(--action-floating-active); }

.cr-btn--important {
  background-color: var(--action-important-default);
  color: var(--action-important-text);
}
.cr-btn--important:hover { background-color: var(--action-important-hover); }
.cr-btn--important:active { background-color: var(--action-important-active); }

.cr-btn--info {
  background-color: var(--action-info-default);
  color: var(--action-info-text);
}
.cr-btn--info:hover { background-color: var(--action-info-hover); }
.cr-btn--info:active { background-color: var(--action-info-active); }

.cr-btn--success {
  background-color: var(--action-success-default);
  color: var(--action-success-text);
}
.cr-btn--success:hover { background-color: var(--action-success-hover); }
.cr-btn--success:active { background-color: var(--action-success-active); }

.cr-btn--warning {
  background-color: var(--action-warning-default);
  color: var(--action-warning-text);
}
.cr-btn--warning:hover { background-color: var(--action-warning-hover); }
.cr-btn--warning:active { background-color: var(--action-warning-active); }

.cr-btn--danger {
  background-color: var(--action-danger-default);
  color: var(--action-danger-text);
}
.cr-btn--danger:hover { background-color: var(--action-danger-hover); }
.cr-btn--danger:active { background-color: var(--action-danger-active); }

/* Icon slots */
.cr-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: inherit;
}

.cr-btn__label {
  display: inline-block;
}


/* ============================================================
   ICON BUTTON  (.cr-btn-icon)
   Figma: icon-button (key e5aa904997ae8702a69b44204e1ce930bf2c52ec)
   ============================================================ */

.cr-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-height-default);
  height: var(--size-control-height-default);
  padding: 0;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--border-radius-control);
  font-size: var(--text-size-paragraph-default);
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.cr-btn-icon:focus-visible {
  outline: var(--border-width-large) solid var(--border-color-emphasis);
  outline-offset: var(--border-width-large);
}

.cr-btn-icon:disabled,
.cr-btn-icon[aria-disabled="true"] {
  opacity: 0.24;
  pointer-events: none;
}

/* Size: small */
.cr-btn-icon--small {
  width: var(--size-control-height-small);
  height: var(--size-control-height-small);
  font-size: var(--text-size-paragraph-small);
}

/* --- Type variants (same palette as .cr-btn) --- */

.cr-btn-icon--primary {
  background-color: var(--action-primary-default);
  color: var(--action-primary-text);
}
.cr-btn-icon--primary:hover { background-color: var(--action-primary-hover); }
.cr-btn-icon--primary:active { background-color: var(--action-primary-active); }

.cr-btn-icon--secondary {
  background-color: var(--action-secondary-default);
  color: var(--action-secondary-text);
}
.cr-btn-icon--secondary:hover { background-color: var(--action-secondary-hover); }
.cr-btn-icon--secondary:active { background-color: var(--action-secondary-active); }

.cr-btn-icon--floating {
  background-color: var(--action-floating-default);
  color: var(--action-floating-text);
}
.cr-btn-icon--floating:hover { background-color: var(--action-floating-hover); }
.cr-btn-icon--floating:active { background-color: var(--action-floating-active); }

.cr-btn-icon--important {
  background-color: var(--action-important-default);
  color: var(--action-important-text);
}
.cr-btn-icon--important:hover { background-color: var(--action-important-hover); }
.cr-btn-icon--important:active { background-color: var(--action-important-active); }

.cr-btn-icon--info {
  background-color: var(--action-info-default);
  color: var(--action-info-text);
}
.cr-btn-icon--info:hover { background-color: var(--action-info-hover); }
.cr-btn-icon--info:active { background-color: var(--action-info-active); }

.cr-btn-icon--success {
  background-color: var(--action-success-default);
  color: var(--action-success-text);
}
.cr-btn-icon--success:hover { background-color: var(--action-success-hover); }
.cr-btn-icon--success:active { background-color: var(--action-success-active); }

.cr-btn-icon--warning {
  background-color: var(--action-warning-default);
  color: var(--action-warning-text);
}
.cr-btn-icon--warning:hover { background-color: var(--action-warning-hover); }
.cr-btn-icon--warning:active { background-color: var(--action-warning-active); }

.cr-btn-icon--danger {
  background-color: var(--action-danger-default);
  color: var(--action-danger-text);
}
.cr-btn-icon--danger:hover { background-color: var(--action-danger-hover); }
.cr-btn-icon--danger:active { background-color: var(--action-danger-active); }


/* ============================================================
   INPUT  (.cr-input)
   Figma: input (key e0eb1ede9639d5de8d76660c5d7e06a13a05c9a9)
   ============================================================ */

.cr-input {
  display: flex;
  align-items: center;
  gap: var(--size-padding-tiny);
  height: var(--size-control-height-default);
  padding-inline: var(--size-padding-small);
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-control);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.5;
  color: var(--text-color-primary-default);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.cr-input:focus-within {
  border-color: var(--border-color-emphasis);
}

/* Size: small */
.cr-input--small {
  height: var(--size-control-height-small);
  padding-inline: var(--size-padding-tiny);
  font-size: var(--text-size-paragraph-small);
}

/* State: danger / error */
.cr-input--danger {
  border-color: var(--border-color-danger);
}
.cr-input--danger .cr-input__icon {
  color: var(--border-color-danger);
}
.cr-input--danger .cr-input__control {
  color: var(--text-color-danger);
}

/* State: readonly */
.cr-input--readonly {
  background-color: var(--surface-secondary);
}
.cr-input--readonly .cr-input__control {
  color: var(--text-color-secondary-default);
}

/* State: disabled */
.cr-input--disabled {
  background-color: var(--surface-secondary);
  opacity: 0.24;
  pointer-events: none;
}

/* The actual <input> element */
.cr-input__control {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  text-overflow: ellipsis;
}

.cr-input__control::placeholder {
  color: var(--text-color-secondary-default);
}

/* Icon slot inside input */
.cr-input__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-color-secondary-default);
}

/* Larger icon box for default size */
.cr-input:not(.cr-input--small) .cr-input__icon {
  width: 25px;
  height: 25px;
}


/* ============================================================
   SELECT  (.cr-select)
   Figma: select (component set, node 3968:7522)
   ============================================================ */

.cr-select {
  display: flex;
  align-items: center;
  gap: var(--size-padding-tiny);
  height: var(--size-control-height-default);
  padding-inline: var(--size-padding-small);
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-control);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.5;
  color: var(--text-color-primary-default);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.cr-select:focus-within {
  border-color: var(--border-color-emphasis);
}

/* Size: small */
.cr-select--small {
  height: var(--size-control-height-small);
  padding-inline: var(--size-padding-tiny);
  font-size: var(--text-size-paragraph-small);
}

/* State: danger / error */
.cr-select--danger {
  border-color: var(--border-color-danger);
}
.cr-select--danger .cr-select__icon,
.cr-select--danger .cr-select__chevron {
  color: var(--border-color-danger);
}
.cr-select--danger .cr-select__control {
  color: var(--text-color-danger);
}

/* State: readonly */
.cr-select--readonly {
  background-color: var(--surface-secondary);
  cursor: default;
}
.cr-select--readonly .cr-select__control {
  color: var(--text-color-secondary-default);
}

/* State: disabled */
.cr-select--disabled {
  background-color: var(--surface-secondary);
  opacity: 0.24;
  pointer-events: none;
}

/* The native <select> element */
.cr-select__control {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: inherit;
  text-overflow: ellipsis;
}

/* Placeholder-like styling for unselected state */
.cr-select__control:invalid,
.cr-select__control option[value=""] {
  color: var(--text-color-secondary-default);
}

/* Icon slot */
.cr-select__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-color-secondary-default);
}

.cr-select:not(.cr-select--small) .cr-select__icon {
  width: 25px;
  height: 25px;
}

/* Trailing chevron */
.cr-select__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-color-secondary-default);
  pointer-events: none;
}

.cr-select:not(.cr-select--small) .cr-select__chevron {
  width: 25px;
  height: 25px;
}


/* ============================================================
   INPUT GROUP  (.cr-input-group)
   Figma: input-group (key 906f07ca02d2257449eb118fd382e0e8b9a904f5)
   ============================================================ */

.cr-input-group {
  display: flex;
}

/* Layout: stacked (default) */
.cr-input-group--stacked {
  flex-direction: column;
  gap: var(--size-padding-tiny);
}

/* Layout: horizontal */
.cr-input-group--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}
.cr-input-group--horizontal .cr-input-group__text {
  flex-shrink: 0;
  width: 256px;
  min-height: var(--size-control-height-default);
  justify-content: center;
}
.cr-input-group--horizontal .cr-input-group__field {
  flex: 1 0 0;
  min-width: 0;
  padding-block: var(--size-padding-micro);
}

/* Label + description container */
.cr-input-group__text {
  display: flex;
  flex-direction: column;
  gap: var(--size-padding-none);
}

.cr-input-group__label {
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-label-default);
  font-weight: var(--text-weight-label);
  line-height: 1.5;
  color: var(--text-color-primary-default);
}

.cr-input-group__description {
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-small);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.4;
  color: var(--text-color-secondary-default);
}

.cr-input-group__tooltip {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--size-padding-micro);
  color: var(--text-color-secondary-default);
  cursor: help;
}

/* Field column: input + error + annotation */
.cr-input-group__field {
  display: flex;
  flex-direction: column;
  gap: var(--size-gap-input-label-description);
}

.cr-input-group__error {
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-small);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.4;
  color: var(--text-color-danger);
}

.cr-input-group__annotation {
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-small);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.4;
  color: var(--text-color-secondary-default);
}


/* ============================================================
   TEXTAREA  (.cr-textarea)
   Figma: textarea (component set, node 3151:1244)
   ============================================================ */

.cr-textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: var(--size-padding-tiny) var(--size-padding-small);
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-control);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.5;
  color: var(--text-color-primary-default);
  resize: vertical;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.cr-textarea:focus {
  border-color: var(--border-color-emphasis);
  outline: none;
}

.cr-textarea::placeholder {
  color: var(--text-color-secondary-default);
}

/* State: danger / error */
.cr-textarea--danger {
  border-color: var(--border-color-danger);
  color: var(--text-color-danger);
}

/* State: readonly */
.cr-textarea--readonly {
  background-color: var(--surface-secondary);
  color: var(--text-color-secondary-default);
}

/* State: disabled */
.cr-textarea--disabled {
  background-color: var(--surface-secondary);
  opacity: 0.24;
  pointer-events: none;
}


/* ============================================================
   TAG  (.cr-tag)
   Figma: tag (key 88d16dfe0126f6f4d956dae1009e742057f25a0f)
   ============================================================ */

.cr-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--components-tag-gap);
  min-height: var(--components-tag-height);
  padding: var(--components-tag-padding-y) var(--components-tag-padding-x);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--border-radius-badge);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-small);
  font-weight: var(--components-tag-font-weight);
  line-height: 1.43;
  white-space: nowrap;
  overflow: hidden;
}

/* Icon slot */

.cr-tag__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  font-size: 12px;
}

/* --- Filled type variants (default) --- */

.cr-tag--brand {
  background-color: var(--action-primary-default);
  color: var(--action-primary-text);
}

.cr-tag--secondary {
  background-color: var(--surface-secondary);
  color: var(--text-color-on-surface-secondary);
}

.cr-tag--important {
  background-color: var(--action-important-default);
  color: var(--action-important-text);
}

.cr-tag--danger {
  background-color: var(--action-danger-default);
  color: var(--text-color-on-surface-danger);
}

.cr-tag--success {
  background-color: var(--action-success-default);
  color: var(--text-color-on-surface-success);
}

.cr-tag--warning {
  background-color: var(--action-warning-default);
  color: var(--text-color-on-surface-warning);
}

.cr-tag--info {
  background-color: var(--action-info-default);
  color: var(--text-color-on-surface-info);
}

/* Filled icon accent — semantic color differs from on-surface label */

.cr-tag--danger .cr-tag__icon { color: var(--text-color-danger); }
.cr-tag--success .cr-tag__icon { color: var(--text-color-success); }
.cr-tag--warning .cr-tag__icon { color: var(--text-color-warning); }
.cr-tag--info .cr-tag__icon { color: var(--text-color-info); }

/* --- Outlined variants --- */

.cr-tag--outlined {
  background-color: transparent;
}

.cr-tag--outlined.cr-tag--brand {
  border-color: var(--action-primary-default);
  color: var(--action-primary-default);
}

.cr-tag--outlined.cr-tag--secondary {
  border-color: var(--border-color-default);
  color: var(--text-color-secondary-default);
}

.cr-tag--outlined.cr-tag--important {
  border-color: var(--action-important-default);
  color: var(--text-color-primary-default);
}

.cr-tag--outlined.cr-tag--danger {
  border-color: var(--text-color-danger);
  color: var(--text-color-danger);
}

.cr-tag--outlined.cr-tag--success {
  border-color: var(--text-color-success);
  color: var(--text-color-success);
}

.cr-tag--outlined.cr-tag--warning {
  border-color: var(--text-color-warning);
  color: var(--text-color-warning);
}

.cr-tag--outlined.cr-tag--info {
  border-color: var(--text-color-info);
  color: var(--text-color-info);
}


/* ============================================================
   DOT INDICATOR  (.cr-dot)
   Figma: dot-indicator (component set, node 3900:3681)
   ============================================================ */

.cr-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cr-dot--secondary { background-color: var(--text-color-secondary-default); }
.cr-dot--success { background-color: var(--text-color-success); }
.cr-dot--danger { background-color: var(--text-color-danger); }


/* ============================================================
   CARD  (.cr-card)
   Figma: card (component set, node 3999:7634)
   Variants: size (default | small) × type (primary | secondary)
   ============================================================ */

.cr-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--size-padding-large);
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-card-default);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.04);
  overflow: clip;
}

.cr-card--secondary {
  background-color: var(--surface-secondary);
}

.cr-card--small {
  padding: var(--size-padding-medium);
  border-radius: var(--border-radius-card-small);
  box-shadow: none;
}


/* ============================================================
   SELECTABLE CARD  (.cr-selectable-card)
   Figma: selectable-card (component set, node 1271:3356)
   ============================================================ */

.cr-selectable-card {
  display: flex;
  align-items: flex-start;
  gap: var(--size-padding-small);
  padding: var(--size-padding-small);
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-control);
  width: 576px;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--text-family-body), sans-serif;
  cursor: pointer;
}

/* Checked state (interactive) — CSS-only via :has(:checked) */
.cr-selectable-card:has(:checked) {
  background-color: var(--surface-secondary);
  border-color: var(--action-primary-default);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--action-primary-default);
}

/* Readonly base */
.cr-selectable-card--readonly {
  cursor: default;
}

/* Readonly + checked */
.cr-selectable-card--readonly.cr-selectable-card--checked {
  background-color: var(--surface-secondary);
}

/* Control column */

.cr-selectable-card__control {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  padding-block: 2px;
}

.cr-selectable-card--readonly .cr-selectable-card__control {
  height: 24px;
}

/* Content area */

.cr-selectable-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
}

/* Header row */

.cr-selectable-card__header {
  display: flex;
  align-items: center;
  gap: var(--size-padding-tiny);
}

.cr-selectable-card--readonly .cr-selectable-card__header {
  justify-content: space-between;
}

/* Heading + tag group (readonly left side) */

.cr-selectable-card__heading-group {
  display: flex;
  align-items: center;
  gap: var(--size-padding-tiny);
}

/* Heading text */

.cr-selectable-card__heading {
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-strong);
  line-height: 1.5;
  color: var(--text-color-primary-default);
  white-space: nowrap;
}

/* Body (description + slot) */

.cr-selectable-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--size-padding-tiny);
}

/* Description */

.cr-selectable-card__description {
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.5;
  color: var(--text-color-secondary-default);
}

/* Component slot */

.cr-selectable-card__slot {
  min-height: 36px;
}

/* Navigation variant */

.cr-selectable-card--navigation {
  align-items: center;
  cursor: pointer;
}

.cr-selectable-card--navigation.cr-selectable-card--checked {
  background-color: var(--surface-secondary);
  border-color: var(--action-primary-default);
  box-shadow: inset 0 0 0 var(--border-width-default) var(--action-primary-default);
}

/* Icon container (navigation leading element) */

.cr-selectable-card__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--surface-tertiary);
  border-radius: var(--border-radius-control);
  overflow: hidden;
  font-size: 24px;
  color: var(--text-color-primary-default);
}

/* Trailing chevron (navigation) */

.cr-selectable-card__chevron {
  flex-shrink: 0;
  font-size: 24px;
  color: var(--text-color-primary-default);
}


/* ============================================================
   CHECKBOX  (.cr-checkbox)
   Figma: checkbox (key 458c2c2f8ec477f36f960c159a2230a3c50c21ca)
   ============================================================ */

.cr-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: var(--size-input-control-width);
  height: var(--size-input-control-height);
  margin: 0;
  padding: 0;
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-checkbox);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.cr-checkbox:checked {
  background-color: var(--action-primary-default);
  border-color: transparent;
  position: relative;
}

.cr-checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--action-primary-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 3.5L5.5 9.5L2.5 6.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 3.5L5.5 9.5L2.5 6.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cr-checkbox:disabled {
  opacity: 0.24;
  pointer-events: none;
  cursor: default;
}


/* ============================================================
   RADIO  (.cr-radio)
   Figma: radio (component set, node 90:3754)
   ============================================================ */

.cr-radio {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: var(--components-radio-width);
  height: var(--components-radio-height);
  margin: 0;
  padding: 0;
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.cr-radio:checked {
  background-color: var(--action-primary-default);
  border-color: transparent;
  position: relative;
}

.cr-radio:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--action-primary-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 8px 8px;
  mask-size: 8px 8px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cr-radio:disabled {
  opacity: 0.24;
  pointer-events: none;
  cursor: default;
}


/* ============================================================
   TOGGLE  (.cr-toggle)
   Figma: toggle (component set, node 1807:405)
   ============================================================ */

.cr-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin: 0;
  padding: 0;
  background-color: var(--action-secondary-default);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s ease;
}

.cr-toggle:checked {
  background-color: var(--action-primary-default);
}

.cr-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--action-secondary-text);
  transition: left 0.15s ease, background-color 0.15s ease;
}

.cr-toggle:checked::after {
  left: 22px;
  background-color: var(--action-primary-text);
}

.cr-toggle:disabled {
  opacity: 0.24;
  pointer-events: none;
  cursor: default;
}


/* ============================================================
   NOTIFICATION  (.cr-notification)
   Figma: notification (component set, node 1268:233)
   ============================================================ */

.cr-notification {
  position: relative;
  display: flex;
  gap: var(--size-padding-tiny);
  padding: var(--size-padding-small);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-card-default);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  line-height: 1.5;
  width: 384px;
  max-width: 100%;
}

/* --- Layout: toast (default) --- */

.cr-notification--toast {
  align-items: flex-start;
}

/* --- Layout: banner --- */

.cr-notification--banner {
  align-items: center;
}

/* --- Type variants --- */

.cr-notification--primary {
  background-color: var(--surface-secondary);
  border-color: var(--border-color-default);
  color: var(--text-color-on-surface-secondary);
}

.cr-notification--danger {
  background-color: var(--surface-danger);
  border-color: var(--border-color-danger);
  color: var(--text-color-on-surface-danger);
}

.cr-notification--warning {
  background-color: var(--surface-warning);
  border-color: var(--border-color-warning);
  color: var(--text-color-on-surface-warning);
}

.cr-notification--success {
  background-color: var(--surface-success);
  border-color: var(--border-color-success);
  color: var(--text-color-on-surface-success);
}

.cr-notification--info {
  background-color: var(--surface-info);
  border-color: var(--border-color-info);
  color: var(--text-color-on-surface-info);
}

/* Icon */

.cr-notification__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  font-size: 20px;
}

.cr-notification--primary .cr-notification__icon { color: var(--text-color-info); }
.cr-notification--danger .cr-notification__icon { color: var(--text-color-danger); }
.cr-notification--warning .cr-notification__icon { color: var(--text-color-warning); }
.cr-notification--success .cr-notification__icon { color: var(--text-color-success); }
.cr-notification--info .cr-notification__icon { color: var(--text-color-info); }

/* Text column */

.cr-notification__text {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
}

.cr-notification--banner .cr-notification__text {
  align-items: flex-start;
}

.cr-notification--toast .cr-notification__text {
  align-items: flex-end;
}

.cr-notification__heading {
  width: 100%;
  margin: 0;
  font-weight: var(--text-weight-paragraph-strong);
}

.cr-notification__description {
  width: 100%;
  margin: 0;
  font-weight: var(--text-weight-paragraph-default);
}

/* Toast: gap between text content and action button */

.cr-notification--toast .cr-notification__text > .cr-btn {
  margin-top: var(--size-padding-tiny);
}

/* Actions (banner layout — inline button + dismiss) */

.cr-notification__actions {
  display: flex;
  gap: var(--size-gap-control-group);
  align-items: flex-start;
  flex-shrink: 0;
}

/* Dismiss button (toast — absolute positioned top-right) */

.cr-notification--toast .cr-notification__dismiss {
  position: absolute;
  top: 7px;
  right: 7px;
}


/* ============================================================
   EMPTY STATE  (.cr-empty-state)
   Figma: empty-state (component set, node 2083:1444)
   ============================================================ */

.cr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-padding-medium);
  width: 500px;
  max-width: 600px;
  padding: var(--size-padding-huge) var(--size-padding-large);
  font-family: var(--text-family-body), sans-serif;
}

/* Message group (icon/spinner + title + description) */

.cr-empty-state__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-padding-micro);
  width: 100%;
}

/* Icon container (default state) */

.cr-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: 48px;
  color: var(--text-color-primary-default);
}

/* Spinner container (loading state) */

.cr-empty-state__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 48px;
  color: var(--text-color-primary-default);
}

/* Title */

.cr-empty-state__title {
  margin: 0;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-strong);
  line-height: 1.5;
  color: var(--text-color-primary-default);
  text-align: center;
  width: 100%;
}

/* Description */

.cr-empty-state__description {
  margin: 0;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 1.5;
  color: var(--text-color-secondary-default);
  text-align: center;
  width: 100%;
}


/* ============================================================
   FILE UPLOAD  (.cr-file-upload)
   Figma: modal-file-upload (component set, node 3931:6044)
   ============================================================ */

.cr-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 232px;
  padding-inline: var(--size-padding-large);
  background-color: var(--surface-secondary);
  border: var(--border-width-default) dashed var(--border-color-tertiary);
  border-radius: var(--border-radius-control);
  font-family: var(--text-family-body), sans-serif;
  cursor: pointer;
}

/* State: drop-success (file hovering over zone) */
.cr-file-upload--drop-success {
  background-color: var(--surface-info);
  border-color: var(--border-color-info);
}

/* State: error (invalid file type) */
.cr-file-upload--error {
  background-color: var(--surface-danger);
  border-color: var(--border-color-danger);
  border-style: solid;
}

/* State: disabled (file limit reached) */
.cr-file-upload--disabled {
  cursor: default;
}

/* Nested EmptyState — fit to drop-zone width */

.cr-file-upload .cr-empty-state {
  width: 100%;
  max-width: 100%;
}

/* Icon uses secondary color by default inside file upload */
.cr-file-upload .cr-empty-state__icon {
  color: var(--text-color-secondary-default);
}

/* Text uses on-surface color matching the file-upload state */
.cr-file-upload .cr-empty-state__title,
.cr-file-upload .cr-empty-state__description {
  color: var(--text-color-on-surface-secondary);
}

.cr-file-upload--drop-success .cr-empty-state__icon,
.cr-file-upload--drop-success .cr-empty-state__title,
.cr-file-upload--drop-success .cr-empty-state__description {
  color: var(--text-color-on-surface-info);
}

.cr-file-upload--error .cr-empty-state__icon,
.cr-file-upload--error .cr-empty-state__title,
.cr-file-upload--error .cr-empty-state__description {
  color: var(--text-color-on-surface-danger);
}


/* ============================================================
   TABLE CELL  (.cr-table-cell)
   Figma: table-cell (key eb1df2cd0f2e4a7210d881db814859479f1490d9)
   ============================================================ */

.cr-table-cell {
  display: flex;
  align-items: center;
  height: 44px;
  padding-block: var(--size-padding-micro);
  overflow: hidden;
  font-family: var(--text-family-body), sans-serif;
  border-top: var(--border-width-default) solid var(--border-color-default);
}

/* Column header — no top border */
.cr-table-cell--column-header {
  border-top: none;
}

/* Padding spacer */

.cr-table-cell__spacer {
  flex-shrink: 0;
  width: var(--size-padding-small);
  align-self: stretch;
}

/* Text content */

.cr-table-cell__text {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: normal;
  color: var(--text-color-primary-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column header content */

.cr-table-cell__header {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  height: 24px;
  overflow: hidden;
}

.cr-table-cell__header-text {
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-label);
  line-height: normal;
  color: var(--text-color-primary-default);
  white-space: nowrap;
}

/* Component slot */

.cr-table-cell__slot {
  height: 36px;
}

/* Input stretches to fill cell */

.cr-table-cell .cr-input {
  flex: 1 0 0;
  min-width: 0;
}


/* =================================================================
   MODAL  (.cr-modal, .cr-modal-header, .cr-modal-footer)
   ================================================================= */

/* --- Modal shell --- */

.cr-modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 600px;
  max-width: 100%;
  max-height: calc(100vh - 64px);
  background-color: var(--surface-primary);
  border-radius: var(--border-radius-card-default);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: var(--text-family-body), sans-serif;
}

/* --- Modal header --- */

.cr-modal-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--size-padding-small) var(--size-padding-medium) var(--size-padding-small) var(--size-padding-large);
  overflow: hidden;
}

.cr-modal-header__title {
  margin: 0;
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-heading-small);
  font-weight: var(--text-weight-heading);
  line-height: 1.25;
  color: var(--text-color-primary-default);
  white-space: nowrap;
}

/* --- Modal body --- */

.cr-modal-body {
  padding: 0 var(--size-padding-large);
}

.cr-modal-body p {
  margin: 0;
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-regular);
  line-height: 24px;
  color: var(--text-color-primary-default);
}

/* --- Modal footer --- */

.cr-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size-padding-large);
}

.cr-modal-footer__button-group {
  display: flex;
  flex: 1 0 0;
  min-width: 1px;
  gap: var(--size-gap-control-group);
  align-items: center;
  justify-content: flex-end;
}

.cr-modal-footer__button-group .cr-btn {
  min-width: 128px;
}

/* --- Alert modal variant (narrower, 500px) --- */

.cr-modal--alert {
  width: 500px;
}


/* =================================================================
   MENU  (.cr-menu, .cr-menu-item, .cr-menu-separator, .cr-menu-section-header)
   Figma: menu (node 3442:4450), menu-item (node 3442:4460),
          menu-separator (node 3442:4478), menu-section-header (node 3942:7172)
   ================================================================= */

/* --- Menu container --- */

.cr-menu {
  display: flex;
  flex-direction: column;
  min-width: 224px;
  padding: var(--size-padding-tiny);
  background-color: var(--surface-primary);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-control);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
  font-family: var(--text-family-body), sans-serif;
}

/* --- Menu item --- */

.cr-menu-item {
  display: flex;
  align-items: center;
  gap: var(--size-padding-tiny);
  height: 36px;
  padding-inline: var(--size-padding-small);
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-control);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-default);
  font-weight: var(--text-weight-paragraph-default);
  line-height: 24px;
  color: var(--action-floating-text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s ease;
}

.cr-menu-item:hover {
  background-color: var(--action-floating-hover);
}

.cr-menu-item:active,
.cr-menu-item--active {
  background-color: var(--action-floating-active);
}

.cr-menu-item:disabled,
.cr-menu-item[aria-disabled="true"] {
  background-color: var(--action-floating-active);
  opacity: 0.5;
  pointer-events: none;
}

/* Leading element (icon, checkbox, radio) */

.cr-menu-item__leading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Inputs inside menu items are visual-only; the <label> handles toggling */

.cr-menu-item__leading .cr-checkbox,
.cr-menu-item__leading .cr-radio {
  pointer-events: none;
}

.cr-menu-item__label {
  flex: 1 0 0;
  min-width: 0;
}

/* --- Menu separator --- */

.cr-menu-separator {
  height: var(--border-width-default);
  background-color: var(--border-color-default);
  margin-block: var(--size-padding-micro);
}

/* --- Menu section header --- */

.cr-menu-section-header {
  padding: var(--size-padding-micro) var(--size-padding-small) 0;
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-label-default);
  font-weight: var(--text-weight-label);
  line-height: 1.5;
  color: var(--text-color-secondary-default);
}


/* =================================================================
   STEPPER  (.cr-stepper, .cr-stepper__step)
   Figma: stepper (node 3936:6629),
          stepper/step (component set, node 4006:8559)
   ================================================================= */

/* --- Stepper container --- */

.cr-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-padding-micro);
  border: var(--border-width-default) solid var(--border-color-default);
  border-radius: var(--border-radius-control);
}

.cr-stepper__list {
  display: flex;
  align-items: center;
  gap: var(--size-padding-micro);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Step item --- */

.cr-stepper__step {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding-left: var(--size-padding-tiny);
  padding-right: var(--size-padding-small);
  border-radius: var(--border-radius-step);
  background-color: var(--action-floating-default);
  color: var(--action-floating-text);
  font-family: var(--text-family-body), sans-serif;
  font-size: var(--text-size-paragraph-small);
  font-weight: var(--text-weight-regular);
  line-height: 20px;
  white-space: nowrap;
}

/* Active step */

.cr-stepper__step--active {
  background-color: var(--action-secondary-default);
  color: var(--action-secondary-text);
  overflow: hidden;
}

/* Completed step */

.cr-stepper__step--completed {
  background-color: var(--action-floating-default);
  color: var(--action-floating-text);
}

/* Step icon */

.cr-stepper__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 20px;
  flex-shrink: 0;
}