/*
 * The screens of rollouts: the list, the page of one rollout, the panels that start one, the dialog that decides
 * on one, the button in the top bar and the list of mails. Everything here is layout around the components of
 * js/ui and uses the tokens of css/design only; a class starts with rl-.
 */

/* The page of one rollout */

.rl-top {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-5);
}

.rl-top__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-4);
  margin-bottom: var(--ui-space-2);
}

.rl-top__now {
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
  overflow-wrap: anywhere;
}

.rl-top__side {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
  font-variant-numeric: tabular-nums;
}

.rl-log {
  padding: var(--ui-space-4) var(--ui-space-5);
}

@media (min-width: 1100px) {
  .rl-sticky {
    position: sticky;
    top: calc(var(--ui-topbar-height) + var(--ui-space-4));
  }
}

.rl-failure__label {
  margin-top: var(--ui-space-3);
  font-weight: var(--ui-weight-semibold);
}

.rl-failure__label:first-child {
  margin-top: 0;
}

.rl-failure__message {
  margin: var(--ui-space-1) 0 0;
  border: 1px solid var(--tone-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-3);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: var(--ui-font-mono);
  font-size: var(--ui-text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rl-failure__steps {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: var(--ui-space-1) 0 0;
  padding-left: var(--ui-space-5);
  list-style: disc;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Who asked, approved, rejected or cancelled */

.rl-people {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
}

.rl-person {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  min-width: 0;
}

.rl-person__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ui-info-border);
  border-radius: var(--ui-radius-full);
  background: var(--ui-info-bg);
  color: var(--ui-info-text);
}

.rl-person__mark--pending {
  border-style: dashed;
  border-color: var(--ui-border-control);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
}

.rl-person__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rl-person__name {
  font-weight: var(--ui-weight-medium);
  overflow-wrap: anywhere;
}

.rl-person__sub {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.rl-person__note {
  margin-top: var(--ui-space-2);
  border-left: 2px solid var(--ui-border-strong);
  padding-left: var(--ui-space-3);
  color: var(--ui-text);
  font-size: var(--ui-text-sm);
  overflow-wrap: anywhere;
}

/* A list of plain lines: what runs now, what a server rollout does */

.rl-lines {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
}

.rl-lines li {
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.rl-lines__title {
  font-weight: var(--ui-weight-medium);
}

/* Release notes of a rollout: one part per component, the notes themselves are the component of Versions */

.rl-notes {
  display: flex;
  flex-direction: column;
}

.rl-notes__part + .rl-notes__part {
  margin-top: var(--ui-space-4);
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-4);
}

.rl-notes__title {
  margin: 0 0 var(--ui-space-2);
  color: var(--ui-text);
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-semibold);
  overflow-wrap: anywhere;
}

/* Cells of the lists: a main line and a quieter line under it */

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

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

.rl-cell__strong {
  font-weight: var(--ui-weight-semibold);
}

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

.rl-cell-sub--problem {
  color: var(--ui-critical-text);
}

/* 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) .rl-cell {
    align-items: flex-end;
  }

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

.rl-tabpanel {
  min-width: 0;
}

/* A rollout inside the card of its package or its server */

.rl-panel {
  min-width: 0;
  margin: var(--ui-space-4) 0;
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading);
}

.rl-summary__what {
  font-weight: var(--ui-weight-medium);
  overflow-wrap: anywhere;
}

.rl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.rl-idle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-4);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface);
}

.rl-last {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
  min-width: 0;
  margin: 0;
}

.rl-last__text {
  min-width: 0;
  color: var(--ui-text-muted);
  overflow-wrap: anywhere;
}

/* Why something cannot be done, in words beside the place where it would be done */

.rl-why {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.rl-why--footer {
  flex: 1 1 12rem;
  margin-right: auto;
}

/* The dialog that starts a rollout */

.rl-components {
  display: grid;
  gap: var(--ui-space-3);
}

.rl-component {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-4);
  background: var(--ui-surface);
}

.rl-component__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
}

.rl-component__name {
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-semibold);
}

.rl-component__fields {
  display: grid;
  gap: var(--ui-space-4) var(--ui-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
}

.rl-flags {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin-top: var(--ui-space-3);
}

.rl-flags li {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
}

.rl-keys {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

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

.rl-dialog-part {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-4);
}

.rl-step-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.rl-step-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-full);
  padding: 0.125rem var(--ui-space-3) 0.125rem 0.1875rem;
  background: var(--ui-surface-sunken);
  font-size: var(--ui-text-sm);
}

.rl-step-list__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--ui-radius-full);
  background: var(--ui-primary-tint);
  color: var(--ui-primary);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* What a rollout that replaces a database does to it: a sentence per line behind its number */

.rl-order {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
}

.rl-order li {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  overflow-wrap: anywhere;
}

.rl-order .rl-step-list__number {
  flex: none;
}

.rl-options {
  display: grid;
  gap: var(--ui-space-2);
}

.rl-option {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface);
}

.rl-option.is-on {
  border-color: var(--ui-border-control);
  background: var(--ui-surface-sunken);
}

/* The button in the top bar and its list */

.rl-wide {
  display: none;
}

@media (min-width: 900px) {
  .rl-wide {
    display: inline;
  }
}

.rl-approvals {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
}

.rl-approvals__list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

.rl-approvals__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0 calc(var(--ui-space-2) * -1);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2);
  color: var(--ui-text);
  text-decoration: none;
}

.rl-approvals__item:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

.rl-approvals__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  font-weight: var(--ui-weight-semibold);
}

.rl-approvals__name .ui-mono {
  color: var(--ui-text-muted);
  font-weight: var(--ui-weight-regular);
}

.rl-approvals__sub {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  overflow-wrap: anywhere;
}