/* Generated from ../../../ComponentSystem.html. */
:where(.status-pill, .pill, .connection-status, .ck-status) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    max-width: 100%;
    min-height: 32px;
    padding: var(--ck-space-1) var(--ck-space-3);
    border: var(--ck-border-width) solid var(--ck-status-border);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-status-text);
    background: var(--ck-status-bg);
    font: var(--ck-weight-semibold) var(--ck-type-meta) / var(--ck-leading-meta) var(--ck-font-sans);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).good,
  :where(.status-pill, .pill, .connection-status, .ck-status).success,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="success"] {
    color: var(--ck-success-text);
    border-color: var(--ck-success-border);
    background: var(--ck-success-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).warn,
  :where(.status-pill, .pill, .connection-status, .ck-status).warning,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="warning"] {
    color: var(--ck-warning-text);
    border-color: var(--ck-warning-border);
    background: var(--ck-warning-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).bad,
  :where(.status-pill, .pill, .connection-status, .ck-status).error,
  :where(.status-pill, .pill, .connection-status, .ck-status).danger,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="danger"] {
    color: var(--ck-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).offline,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="offline"] {
    color: var(--ck-offline-text);
    border-color: var(--ck-offline-border);
    background: var(--ck-offline-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).pending,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="pending"] {
    color: var(--ck-pending-text);
    border-color: var(--ck-pending-border);
    background: var(--ck-pending-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).accepted,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="accepted"] {
    color: var(--ck-accepted-text);
    border-color: var(--ck-accepted-border);
    background: var(--ck-accepted-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).retake,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="retake"] {
    color: var(--ck-retake-text);
    border-color: var(--ck-retake-border);
    background: var(--ck-retake-bg);
  }

  :where(.empty, .ck-empty) {
    min-width: 0;
    padding: var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-empty-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-secondary);
    background: var(--ck-empty-bg);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
    overflow-wrap: anywhere;
  }

  :where(.notice, .ck-alert) {
    min-width: 0;
    padding: var(--ck-space-3) var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-info-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-info-text);
    background: var(--ck-info-bg);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
    overflow-wrap: anywhere;
  }

  :where(.notice, .ck-alert).success,
  :where(.notice, .ck-alert)[data-state="success"] {
    color: var(--ck-success-text);
    border-color: var(--ck-success-border);
    background: var(--ck-success-bg);
  }

  :where(.notice, .ck-alert).warning,
  :where(.notice, .ck-alert)[data-state="warning"] {
    color: var(--ck-warning-text);
    border-color: var(--ck-warning-border);
    background: var(--ck-warning-bg);
  }

  :where(.notice, .ck-alert).error,
  :where(.notice, .ck-alert)[data-state="danger"] {
    color: var(--ck-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  :where(.quote-kpi, .qa-kpi, .ops-kpi, .reality-kpi, .ck-kpi) {
    min-width: 0;
    padding: var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-kpi-border);
    border-radius: var(--ck-radius-card);
    color: var(--ck-text-primary);
    background: var(--ck-kpi-bg);
  }

  :where(.quote-kpi, .qa-kpi, .ops-kpi, .reality-kpi, .ck-kpi) > span {
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-semibold);
    line-height: var(--ck-leading-meta);
    letter-spacing: 0;
  }

  :where(.quote-kpi, .qa-kpi, .ops-kpi, .reality-kpi, .ck-kpi) > strong {
    color: var(--ck-text-primary);
    font-size: var(--ck-type-kpi);
    font-weight: var(--ck-weight-title);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  :where(.toast, .ck-toast) {
    z-index: var(--ck-z-toast);
    max-width: min(420px, calc(100vw - 24px));
    padding: var(--ck-space-3) var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-border-control);
    border-radius: var(--ck-radius-control);
    color: var(--ck-toast-text);
    background: var(--ck-toast-bg);
    box-shadow: var(--ck-shadow-floating);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
    overflow-wrap: anywhere;
  }

  :where(.modal-overlay, .ck-modal-overlay) {
    z-index: var(--ck-z-modal);
    background: var(--ck-backdrop);
  }

  :where(.modal, .ck-modal) {
    max-width: min(720px, calc(100vw - 24px));
    max-height: min(90dvh, 900px);
    border: var(--ck-border-width) solid var(--ck-border-default);
    border-radius: var(--ck-radius-modal);
    color: var(--ck-text-primary);
    background: var(--ck-modal-bg);
    box-shadow: var(--ck-shadow-floating);
    overflow: auto;
  }

  @media (max-width: 599px) {
    :where(.modal-overlay, .ck-modal-overlay) {
      align-items: end;
    }

    :where(.modal, .ck-modal) {
      width: 100%;
      max-width: none;
      max-height: calc(100dvh - env(safe-area-inset-top));
      border-radius: var(--ck-radius-sheet) var(--ck-radius-sheet) 0 0;
    }
  }