/*
 * The overview, the first screen of the portal (js/components/overview-view.js and its parts). Everything here is
 * layout of that screen, built from the tokens of the design system; colours come from the tokens alone, so both
 * themes follow by themselves.
 */

.ov {
  min-width: 0;
}

/* How fresh the page is, beside the button that reads it again. */
.ov-fresh {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

/* What is the matter, where: the subject as a heading, its lines under it; side by side where there is room. */

.ov-groups {
  container-type: inline-size;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ov-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--ui-space-3) var(--ui-space-2);
  border-top: 1px solid var(--ui-border);
}

.ov-group:first-child {
  border-top: 0;
}

.ov-group__subject {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-width: 0;
  padding: var(--ui-space-1) var(--ui-space-3);
}

.ov-group__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ui-radius-md);
  background: var(--tone-bg);
  color: var(--tone-text);
}

.ov-group__names {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--ui-space-3);
  min-width: 0;
}

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

.ov-group__sub {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.ov-group__lines {
  min-width: 0;
}

/* With some room the lines stand in from the heading, under its name. */
@container (min-width: 30rem) {
  .ov-group__lines {
    padding-left: calc(2rem + var(--ui-space-3));
  }
}

/* With a lot of room the subject stands beside its lines. */
@container (min-width: 52rem) {
  .ov-group {
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: var(--ui-space-2);
  }

  .ov-group__subject {
    align-items: flex-start;
    padding-top: var(--ui-space-2);
  }

  .ov-group__names {
    flex-direction: column;
    gap: 1px;
  }

  .ov-group__lines {
    padding-left: 0;
  }
}

/* While it reads: the shape of a few groups. */

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

.ov-skeleton__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--ui-space-3);
  align-items: center;
}

/* Nothing is wrong: said plainly, with how fresh that is. */

.ov-calm__head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
}

.ov-calm__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--ui-radius-full);
  background: var(--tone-bg);
  color: var(--tone-text);
}

.ov-calm__words {
  min-width: 0;
}

.ov-calm__title {
  margin: 0;
  color: var(--ui-text);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
}

.ov-calm__text {
  margin: var(--ui-space-1) 0 0;
  max-width: 44rem;
  color: var(--ui-text-muted);
}

.ov-calm__checked {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-5);
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-4);
}

/* A list of lines in a card that runs to the edge: the lines start where the title of the card starts. */

.ov-list {
  padding: var(--ui-space-2);
}

/* A sentence about what happened is read, not scanned: it stands in the weight of text. */
.ov-recent__what {
  font-weight: var(--ui-weight-regular);
}

.ov-rollout__name {
  margin-right: var(--ui-space-2);
}

.ov-rollout__target {
  color: var(--ui-text-muted);
  font-weight: var(--ui-weight-regular);
}

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

.ov-rollout__badges:empty {
  display: none;
}

.ov-rollout__progress {
  margin-top: var(--ui-space-1);
}

/* A portal without a server: the first thing to do, and what follows. */

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

.ov-start__steps {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  max-width: 40rem;
  margin: var(--ui-space-2) auto 0;
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-5);
}