/* GENERATED by ds-compile - do not edit. Edit the spec and recompile. */

/* --------------------------------------------------------------------
   alert (atom) - spec/components/alert.json
   -------------------------------------------------------------------- */
.ds-alert {
  display: block;
  padding: var(--ds-size-spacing-16) var(--ds-size-spacing-24);
  border-style: solid;
  border-width: var(--ds-size-border-none);
  border-inline-start-width: var(--ds-size-border-accent);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-18);
  font-weight: var(--ds-font-weight-light);
  line-height: var(--ds-font-line-28);
  color: var(--ds-color-text-default);
}

.ds-alert--info {
  background-color: var(--ds-color-surface-info);
  border-color: var(--ds-color-border-info);
}

.ds-alert--success {
  background-color: var(--ds-color-surface-success);
  border-color: var(--ds-color-border-success);
}

.ds-alert--warning {
  background-color: var(--ds-color-surface-warning);
  border-color: var(--ds-color-border-warning);
}

.ds-alert--error {
  background-color: var(--ds-color-surface-danger);
  border-color: var(--ds-color-border-danger);
}

.ds-alert--compact {
  padding: var(--ds-size-spacing-8) var(--ds-size-spacing-12);
  font-size: var(--ds-font-size-16);
  line-height: var(--ds-font-line-24);
}

.ds-alert--gap-16 {
  margin-block-end: var(--ds-size-spacing-16);
}

/* --------------------------------------------------------------------
   button-group (molecule) - spec/components/button-group.json
   -------------------------------------------------------------------- */
.ds-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-size-spacing-8);
}

.ds-button-group--gap-16 {
  margin-block-end: var(--ds-size-spacing-16);
}

/* --------------------------------------------------------------------
   button (atom) - spec/components/button.json
   -------------------------------------------------------------------- */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-size-spacing-8);
  padding: var(--ds-size-spacing-0) var(--ds-size-spacing-16);
  border-style: solid;
  border-width: var(--ds-size-border-thick);
  border-radius: var(--ds-size-radius-none);
  font-family: var(--ds-font-family-sans);
  font-weight: var(--ds-font-weight-medium);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.ds-button:hover {
  text-decoration: underline;
}

.ds-button:focus-visible {
  outline-width: var(--ds-size-focus-ring);
  outline-style: solid;
  outline-color: var(--ds-color-action-focus-ring);
}

.ds-button:disabled {
  cursor: not-allowed;
  background-color: var(--ds-color-surface-subtle);
  border-color: var(--ds-color-surface-subtle);
  color: var(--ds-color-text-disabled);
  text-decoration: none;
}

.ds-button--primary {
  background-color: var(--ds-color-action-primary);
  border-color: var(--ds-color-action-primary);
  color: var(--ds-color-text-inverse);
}

.ds-button--primary:hover {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
}

.ds-button--primary:active {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
}

.ds-button--secondary {
  background-color: transparent;
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-default);
}

.ds-button--secondary:hover {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
  color: var(--ds-color-text-inverse);
}

.ds-button--secondary:active {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
  color: var(--ds-color-text-inverse);
}

.ds-button--tertiary {
  background-color: transparent;
  border-color: transparent;
  color: var(--ds-color-text-default);
}

.ds-button--tertiary:hover {
  background-color: var(--ds-color-surface-muted);
  border-color: var(--ds-color-surface-muted);
  color: var(--ds-color-text-action);
}

.ds-button--tertiary:active {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
  color: var(--ds-color-text-inverse);
}

.ds-button--danger {
  background-color: transparent;
  border-color: var(--ds-color-border-danger);
  color: var(--ds-color-text-default);
}

.ds-button--danger:hover {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
  color: var(--ds-color-text-inverse);
}

.ds-button--danger:active {
  background-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
  color: var(--ds-color-text-inverse);
}

.ds-button--md {
  min-height: var(--ds-size-control-md);
  font-size: var(--ds-font-size-18);
  line-height: var(--ds-font-line-28);
}

.ds-button--sm {
  min-height: var(--ds-size-control-sm);
  font-size: var(--ds-font-size-16);
  line-height: var(--ds-font-line-24);
}

.ds-button--full {
  width: var(--ds-size-width-full);
}

/* --------------------------------------------------------------------
   checkbox (molecule) - spec/components/checkbox.json
   -------------------------------------------------------------------- */
.ds-checkbox {
  display: flex;
  align-items: center;
  gap: var(--ds-size-spacing-8);
  margin-block-end: var(--ds-size-spacing-24);
}

.ds-checkbox__box {
  width: var(--ds-size-width-checkbox);
  height: var(--ds-size-width-checkbox);
  margin: var(--ds-size-spacing-0);
  accent-color: var(--ds-color-action-primary);
  cursor: pointer;
}

.ds-checkbox__box:focus-visible {
  outline-width: var(--ds-size-focus-ring);
  outline-style: solid;
  outline-color: var(--ds-color-action-focus-ring);
}

.ds-checkbox__label {
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-light);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
  cursor: pointer;
}

/* --------------------------------------------------------------------
   form-group (molecule) - spec/components/form-group.json
   -------------------------------------------------------------------- */
.ds-form-group {
  margin-block-end: var(--ds-size-spacing-24);
}

.ds-form-group--inline {
  display: inline-block;
  margin: var(--ds-size-spacing-0) var(--ds-size-spacing-16) var(--ds-size-spacing-16) var(--ds-size-spacing-0);
}

.ds-form-group__label {
  display: block;
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-medium);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
  margin-block-end: var(--ds-size-spacing-8);
}

/* --------------------------------------------------------------------
   link (atom) - spec/components/link.json
   -------------------------------------------------------------------- */
.ds-link {
  color: var(--ds-color-text-default);
  text-decoration: underline;
  cursor: pointer;
}

.ds-link:hover {
  color: var(--ds-color-text-action);
}

.ds-link:active {
  color: var(--ds-color-text-action);
}

.ds-link:focus-visible {
  color: var(--ds-color-text-action);
  outline-width: var(--ds-size-focus-ring-thin);
  outline-style: solid;
  outline-color: var(--ds-color-action-hover);
}

/* --------------------------------------------------------------------
   note (atom) - spec/components/note.json
   -------------------------------------------------------------------- */
.ds-note {
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-light);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  line-height: var(--ds-font-line-22);
  color: var(--ds-color-text-default);
}

/* --------------------------------------------------------------------
   page-title (atom) - spec/components/page-title.json
   -------------------------------------------------------------------- */
.ds-page-title {
  margin: var(--ds-size-spacing-0);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-36);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-font-line-54);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
}

.ds-page-title--gap-16 {
  margin-block-end: var(--ds-size-spacing-16);
}

.ds-page-title--gap-32 {
  margin-block-end: var(--ds-size-spacing-32);
}

/* --------------------------------------------------------------------
   paragraph (atom) - spec/components/paragraph.json
   -------------------------------------------------------------------- */
.ds-paragraph {
  margin: var(--ds-size-spacing-0);
  font-family: var(--ds-font-family-sans);
  font-weight: var(--ds-font-weight-light);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
}

.ds-paragraph--md {
  font-size: var(--ds-font-size-16);
  line-height: var(--ds-font-line-24);
}

.ds-paragraph--sm {
  font-size: var(--ds-font-size-14);
  line-height: var(--ds-font-line-22);
}

.ds-paragraph--gap-8 {
  margin-block-end: var(--ds-size-spacing-8);
}

.ds-paragraph--gap-16 {
  margin-block-end: var(--ds-size-spacing-16);
}

.ds-paragraph--gap-24 {
  margin-block-end: var(--ds-size-spacing-24);
}

.ds-paragraph--gap-32 {
  margin-block-end: var(--ds-size-spacing-32);
}

/* --------------------------------------------------------------------
   section-title (atom) - spec/components/section-title.json
   -------------------------------------------------------------------- */
.ds-section-title {
  margin: var(--ds-size-spacing-0);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-22);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-font-line-34);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
}

.ds-section-title--gap-8 {
  margin-block-end: var(--ds-size-spacing-8);
}

.ds-section-title--gap-16 {
  margin-block-end: var(--ds-size-spacing-16);
}

/* --------------------------------------------------------------------
   section (molecule) - spec/components/section.json
   -------------------------------------------------------------------- */
.ds-section {
  margin-block-end: var(--ds-size-spacing-40);
}

/* --------------------------------------------------------------------
   select (atom) - spec/components/select.json
   -------------------------------------------------------------------- */
.ds-select {
  min-height: var(--ds-size-control-md);
  padding: var(--ds-size-spacing-8) var(--ds-size-spacing-16);
  background-color: var(--ds-color-surface-default);
  border-style: solid;
  border-width: var(--ds-size-border-thick);
  border-color: var(--ds-color-border-default);
  border-radius: var(--ds-size-radius-none);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-regular);
  color: var(--ds-color-text-default);
  cursor: pointer;
}

.ds-select:hover {
  border-color: var(--ds-color-border-hover);
}

.ds-select:focus-visible {
  outline-width: var(--ds-size-focus-ring-thin);
  outline-style: solid;
  outline-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-border-hover);
}

.ds-select:disabled {
  background-color: var(--ds-color-surface-subtle);
  border-color: var(--ds-color-border-disabled);
  color: var(--ds-color-text-disabled);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------
   stack (atom) - spec/components/stack.json
   -------------------------------------------------------------------- */
.ds-stack--gap-8 {
  margin-block-end: var(--ds-size-spacing-8);
}

.ds-stack--gap-16 {
  margin-block-end: var(--ds-size-spacing-16);
}

.ds-stack--gap-24 {
  margin-block-end: var(--ds-size-spacing-24);
}

.ds-stack--gap-32 {
  margin-block-end: var(--ds-size-spacing-32);
}

.ds-stack--gap-40 {
  margin-block-end: var(--ds-size-spacing-40);
}

.ds-stack--gap-top-24 {
  margin-block-start: var(--ds-size-spacing-24);
}

/* --------------------------------------------------------------------
   table-cell (atom) - spec/components/table-cell.json
   -------------------------------------------------------------------- */
.ds-table-cell {
  padding: var(--ds-size-spacing-12) var(--ds-size-spacing-16);
  vertical-align: top;
  line-height: var(--ds-font-line-24);
}

/* --------------------------------------------------------------------
   table-header-cell (atom) - spec/components/table-header-cell.json
   -------------------------------------------------------------------- */
.ds-table-header-cell {
  padding: var(--ds-size-spacing-12) var(--ds-size-spacing-16);
  text-align: left;
  vertical-align: top;
  font-size: var(--ds-font-size-18);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-font-line-28);
}

/* --------------------------------------------------------------------
   table-row (atom) - spec/components/table-row.json
   -------------------------------------------------------------------- */
.ds-table-row {
  border-style: solid;
  border-width: var(--ds-size-border-none) var(--ds-size-border-none) var(--ds-size-border-thin) var(--ds-size-border-none);
  border-color: var(--ds-color-border-divider);
}

/* --------------------------------------------------------------------
   table (organism) - spec/components/table.json
   -------------------------------------------------------------------- */
.ds-table {
  width: var(--ds-size-width-full);
  border-collapse: collapse;
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-light);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
  text-align: left;
}

.ds-table__header {
  border-style: solid;
  border-width: var(--ds-size-border-none) var(--ds-size-border-none) var(--ds-size-border-thick) var(--ds-size-border-none);
  border-color: var(--ds-color-border-divider);
}

/* --------------------------------------------------------------------
   tag (atom) - spec/components/tag.json
   -------------------------------------------------------------------- */
.ds-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-size-spacing-0) var(--ds-size-spacing-8);
  border-radius: var(--ds-size-radius-none);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-light);
  letter-spacing: var(--ds-font-letter-spacing-tight);
  color: var(--ds-color-text-default);
  white-space: nowrap;
}

.ds-tag--default {
  background-color: var(--ds-color-tag-default);
}

.ds-tag--blue-light {
  background-color: var(--ds-color-tag-blue-light);
}

.ds-tag--yellow {
  background-color: var(--ds-color-tag-yellow);
}

.ds-tag--green {
  background-color: var(--ds-color-tag-green);
}

.ds-tag--red {
  background-color: var(--ds-color-tag-red);
}

.ds-tag--beige {
  background-color: var(--ds-color-tag-beige);
}

.ds-tag--gray {
  background-color: var(--ds-color-tag-gray);
}

.ds-tag--md {
  line-height: var(--ds-font-line-30);
}

.ds-tag--sm {
  line-height: var(--ds-font-line-22);
  padding: var(--ds-size-spacing-0) var(--ds-size-spacing-4);
}

/* --------------------------------------------------------------------
   text-input (atom) - spec/components/text-input.json
   -------------------------------------------------------------------- */
.ds-text-input {
  display: block;
  width: var(--ds-size-width-full);
  max-width: var(--ds-size-width-field);
  min-height: var(--ds-size-control-md);
  padding: var(--ds-size-spacing-8) var(--ds-size-spacing-16);
  background-color: var(--ds-color-surface-default);
  border-style: solid;
  border-width: var(--ds-size-border-thick);
  border-color: var(--ds-color-border-default);
  border-radius: var(--ds-size-radius-none);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-regular);
  color: var(--ds-color-text-default);
}

.ds-text-input:hover {
  border-color: var(--ds-color-border-hover);
}

.ds-text-input:focus-visible {
  outline-width: var(--ds-size-focus-ring-thin);
  outline-style: solid;
  outline-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-border-hover);
}

.ds-text-input:disabled {
  background-color: var(--ds-color-surface-subtle);
  border-color: var(--ds-color-border-disabled);
  color: var(--ds-color-text-disabled);
}

/* --------------------------------------------------------------------
   textarea (atom) - spec/components/textarea.json
   -------------------------------------------------------------------- */
.ds-textarea {
  display: block;
  width: var(--ds-size-width-full);
  max-width: var(--ds-size-width-field);
  padding: var(--ds-size-spacing-8) var(--ds-size-spacing-16);
  background-color: var(--ds-color-surface-default);
  border-style: solid;
  border-width: var(--ds-size-border-thick);
  border-color: var(--ds-color-border-default);
  border-radius: var(--ds-size-radius-none);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-font-line-24);
  color: var(--ds-color-text-default);
}

.ds-textarea:hover {
  border-color: var(--ds-color-border-hover);
}

.ds-textarea:focus-visible {
  outline-width: var(--ds-size-focus-ring-thin);
  outline-style: solid;
  outline-color: var(--ds-color-action-hover);
  border-color: var(--ds-color-border-hover);
}

.ds-textarea:disabled {
  background-color: var(--ds-color-surface-subtle);
  border-color: var(--ds-color-border-disabled);
  color: var(--ds-color-text-disabled);
}

/* --------------------------------------------------------------------
   validation-message (atom) - spec/components/validation-message.json
   -------------------------------------------------------------------- */
.ds-validation-message {
  display: block;
  width: var(--ds-size-width-full);
  max-width: var(--ds-size-width-field);
  background-color: var(--ds-color-border-danger);
  padding: var(--ds-size-spacing-4) var(--ds-size-spacing-8);
  margin: var(--ds-size-spacing-8) var(--ds-size-spacing-0) var(--ds-size-spacing-0) var(--ds-size-spacing-0);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-font-line-24);
  color: var(--ds-color-text-default);
}

/* --------------------------------------------------------------------
   auth-panel (organism) - app/spec/components/auth-panel.json
   -------------------------------------------------------------------- */
.ds-auth-panel {
  max-width: var(--ds-size-width-panel);
  margin: var(--ds-size-spacing-32) auto;
  padding: var(--ds-size-spacing-32);
  background-color: var(--ds-color-surface-default);
  border-style: solid;
  border-width: var(--ds-size-border-thin);
  border-color: var(--ds-color-border-subtle);
}

/* --------------------------------------------------------------------
   chart-panel (molecule) - app/spec/components/chart-panel.json
   -------------------------------------------------------------------- */
.ds-chart-panel {
  border-style: solid;
  border-width: var(--ds-size-border-thin);
  border-color: var(--ds-color-border-subtle);
  border-radius: var(--ds-size-radius-md);
  padding: var(--ds-size-spacing-24);
}

/* --------------------------------------------------------------------
   chart-toggle (molecule) - app/spec/components/chart-toggle.json
   -------------------------------------------------------------------- */
.ds-chart-toggle {
  display: flex;
  align-items: center;
  gap: var(--ds-size-spacing-6);
  padding: var(--ds-size-spacing-6) var(--ds-size-spacing-12);
  background-color: transparent;
  border-style: solid;
  border-width: var(--ds-size-border-thin);
  border-color: var(--ds-color-border-subtle);
  border-radius: var(--ds-size-radius-sm);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-regular);
  color: var(--ds-color-text-default);
  cursor: pointer;
}

.ds-chart-toggle:focus-visible {
  outline-width: var(--ds-size-focus-ring-thin);
  outline-style: solid;
  outline-color: var(--ds-color-action-hover);
}

.ds-chart-toggle--active {
  border-color: var(--ds-color-border-default);
}

.ds-chart-toggle__dot {
  width: var(--ds-size-width-dot);
  height: var(--ds-size-width-dot);
  border-radius: var(--ds-size-radius-pill);
}

/* --------------------------------------------------------------------
   chart-toggles (molecule) - app/spec/components/chart-toggles.json
   -------------------------------------------------------------------- */
.ds-chart-toggles {
  display: flex;
  gap: var(--ds-size-spacing-12);
  justify-content: flex-end;
  margin-block-end: var(--ds-size-spacing-12);
}

/* --------------------------------------------------------------------
   stat-card (molecule) - app/spec/components/stat-card.json
   -------------------------------------------------------------------- */
.ds-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-spacing-4);
  flex-grow: var(--ds-layout-grow);
  flex-basis: var(--ds-size-width-card-basis);
  padding: var(--ds-size-spacing-16) var(--ds-size-spacing-24);
  background-color: var(--ds-color-surface-info-subtle);
  border-radius: var(--ds-size-radius-md);
  border-style: solid;
  border-width: var(--ds-size-border-none);
  font-family: var(--ds-font-family-sans);
  color: var(--ds-color-text-default);
}

.ds-stat-card--accent {
  border-inline-start-width: var(--ds-size-border-accent);
  border-color: var(--ds-color-accent-highlight);
}

.ds-stat-card__label {
  font-size: var(--ds-font-size-12);
  text-transform: uppercase;
  letter-spacing: var(--ds-font-letter-spacing-wide);
}

.ds-stat-card__value {
  font-size: var(--ds-font-size-24);
  font-weight: var(--ds-font-weight-bold);
}

.ds-stat-card__note {
  font-size: var(--ds-font-size-12);
  color: var(--ds-color-text-subtle);
}

/* --------------------------------------------------------------------
   stat-grid (organism) - app/spec/components/stat-grid.json
   -------------------------------------------------------------------- */
.ds-stat-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--ds-size-spacing-16);
  margin-block-end: var(--ds-size-spacing-24);
}

/* --------------------------------------------------------------------
   stat-saving (atom) - app/spec/components/stat-saving.json
   -------------------------------------------------------------------- */
.ds-stat-saving {
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-font-weight-regular);
  color: var(--ds-color-text-positive);
}

/* --------------------------------------------------------------------
   tool-request-button (molecule) - app/spec/components/tool-request-button.json
   -------------------------------------------------------------------- */
.ds-tool-request-button {
  display: inline-flex;
}