/*
 * Configuration and secrets of a package component (work package P10). Built from the tokens of the design system;
 * the components are the ui-* ones. One family of classes: cf-.
 */

.cf-view {
  min-width: 0;
}

/* The head of the screen when it stands inside a dialog: what it is about, the one action, and the rule in a sentence */

.cf-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-5);
}

.cf-head__what {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-right: auto;
  font-weight: var(--ui-weight-semibold);
}

.cf-head__rules {
  flex-basis: 100%;
}

.cf-note {
  max-width: 62rem;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.cf-note .ui-icon {
  margin-right: 0.25rem;
}

.cf-panel {
  gap: var(--ui-space-5);
  min-width: 0;
}

/* Which release the file is compared with */

.cf-compare {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-5);
}

.cf-compare__field {
  flex: 0 1 24rem;
  min-width: min(100%, 16rem);
}

.cf-compare__now {
  margin: 0 0 0.5625rem;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-md);
}

.cf-diff {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  min-width: 0;
}

/* A cell that holds more than one line */

.cf-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}

.cf-cell__line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-2);
}

.cf-cell__strong {
  color: var(--ui-text);
  font-weight: var(--ui-weight-semibold);
  overflow-wrap: anywhere;
}

.cf-cell__sub {
  display: block;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  white-space: normal;
  overflow-wrap: anywhere;
}

.cf-cell__sub--problem {
  color: var(--ui-critical-text);
}

@container (min-width: 34.01rem) {
  .cf-cell__sub--long {
    min-width: 13rem;
    max-width: 30rem;
  }
}

/* Where the table folds to cards (the room of a phone) the lines of a card read from the right, as its values do. */
@container (max-width: 34rem) {
  .ui-table__cell:not(:first-child) .cf-cell {
    align-items: flex-end;
    text-align: right;
  }

  .ui-table__cell:not(:first-child) .cf-cell__line {
    justify-content: flex-end;
  }
}

/* The panel of one change */

.cf-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-2);
}

.cf-state__text {
  margin: 0;
  color: var(--ui-text);
}

.cf-part {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  min-width: 0;
}

/* Why the button beside it cannot be pressed, in words */
.cf-why {
  flex: 1 1 12rem;
  margin: 0 auto 0 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.cf-ask-note,
.cf-ask-problem {
  margin-top: var(--ui-space-3);
}

/* Secrets */

.cf-intro {
  margin: 0;
  border-bottom: 1px solid var(--ui-border);
  padding: var(--ui-space-3) var(--ui-space-5);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

/* Differences */

.cf-delta {
  display: grid;
  gap: var(--ui-space-4) var(--ui-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.cf-keys {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ui-text-sm);
}

.cf-keys li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem var(--ui-space-2);
}

/* The panel that prepares a change */

.cf-editor-top {
  display: grid;
  gap: var(--ui-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
}

.cf-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
}