/* ==========================================================================
   Complex Lists — structured explanatory lists and collapsible list composition
   ========================================================================== */

.ds-complex-list {
  width: 100%;
  display: grid;
  margin: 0;
  padding: 0;
}

.ds-complex-list--inset {
  margin-inline-start: var(--space-4, 16px);
  padding-inline-start: var(--space-3-5, 14px);
  padding-inline-end: var(--space-4, 16px);
  border-inline-start: 1px solid var(--border-01, rgba(255,255,255,0.08));
}

.ds-complex-list--with-values {
  padding-inline-end: var(--space-6, 32px);
}

.ds-complex-list__item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-3-5);
  border-block-start: 1px solid var(--border-01);
}

.ds-complex-list__item--with-value {
  align-items: center;
}

.ds-complex-list__item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.ds-complex-list__item:last-child {
  padding-block-end: 0;
}

.ds-complex-list__main {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

/* TY-05 choice-label */
.ds-complex-list__title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* TY-02 helper-copy */
.ds-complex-list__copy {
  margin: 0;
  color: var(--helper-text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.52;
}

/* TY-07 compact-control-label */
.ds-complex-list__value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 128px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.ds-complex-list__value--uplift {
  color: var(--warning-note-accent);
}

/* Collapsible composition.
   The trigger consumes Controls classes:
   - ct-value-trigger
   - ct-affordance-chip
*/
.ds-collapsible-list {
  width: 100%;
  display: grid;
  gap: var(--space-3);
}

.ds-collapsible-list__trigger {
  list-style: none;
}

/* Override Controls value-trigger width cap inside collapsible lists.
   Controls owns the trigger chrome; Complex Lists owns the full-width
   relationship between the trigger and its list body. */
.ds-collapsible-list__trigger.ct-value-trigger {
  width: 100%;
}

.ds-collapsible-list__trigger::-webkit-details-marker {
  display: none;
}

.ds-collapsible-list__trigger-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-0-5, 2px);
}

.ds-collapsible-list__title {
  /* TY-05 choice-label */
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.ds-collapsible-list__helper {
  /* TY-04 subtext-meta-copy */
  margin: 0;
  color: var(--helper-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.ds-collapsible-list[open] .ds-collapsible-list__affordance {
  transform: rotate(180deg);
}

.ds-collapsible-list__body {
  display: grid;
}

@media (max-width: 760px) {
 .ds-complex-list--inset {
    margin-inline-start: var(--space-3, 12px);
    padding-inline-start: var(--space-3, 12px);
    padding-inline-end: var(--space-3-5, 14px);
  }

  .ds-complex-list--with-values {
    padding-inline-end: var(--space-5, 24px);
  } 
}

@media (max-width: 480px) {
  .ds-complex-list__item {
    grid-template-columns: 1fr;
    gap: var(--space-1, 4px);
  }

  .ds-complex-list__value {
    justify-content: flex-start;
    text-align: left;
  }
}