/*
 * Release notes and the Versions screen (work package P6). Everything here is built from the tokens of the design
 * system; the components themselves are the ui-* ones. Two families: rn- for release notes wherever they are shown
 * (the Versions screen, a package, a rollout), versions- for the Versions screen.
 */

/* Rendered notes: what the portal read out of a release body */

.rn-body {
  display: grid;
  gap: var(--ui-space-2);
  max-width: 44rem;
  min-width: 0;
  color: var(--ui-text);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading);
  overflow-wrap: anywhere;
}

.rn-body--quiet {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.rn-body__heading,
.rn-body__paragraph {
  margin: 0;
}

.rn-body__heading {
  margin-top: var(--ui-space-2);
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-tight);
  color: var(--ui-text);
}

.rn-body__heading:first-child {
  margin-top: 0;
}

.rn-body__heading--1,
.rn-body__heading--2 {
  font-size: var(--ui-text-lg);
}

.rn-body__heading--4 {
  font-size: var(--ui-text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

.rn-body--quiet .rn-body__heading {
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
}

.rn-body__paragraph {
  white-space: pre-line;
}

.rn-body__list {
  display: grid;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0 0 0 1.25rem;
  list-style: disc;
}

.rn-body__item::marker {
  color: var(--ui-text-subtle);
}

/* An item under another item keeps a bullet of its own, also in a numbered list, and is not counted with it. */
.rn-body__item--depth-1 {
  margin-left: 1.25rem;
  list-style: circle;
}

.rn-body__item--depth-2,
.rn-body__item--depth-3 {
  margin-left: 2.5rem;
  list-style: square;
}

.rn-body__list--numbered {
  counter-reset: rn-item;
  list-style: none;
  padding-left: 0;
}

.rn-body__list--numbered > .rn-body__item--depth-0 {
  counter-increment: rn-item;
  position: relative;
  padding-left: 1.75rem;
}

.rn-body__list--numbered > .rn-body__item--depth-0::before {
  content: counter(rn-item) ".";
  position: absolute;
  left: 0;
  width: 1.25rem;
  color: var(--ui-text-subtle);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rn-body__list--numbered > .rn-body__item--depth-1,
.rn-body__list--numbered > .rn-body__item--depth-2,
.rn-body__list--numbered > .rn-body__item--depth-3 {
  display: list-item;
  margin-left: 3rem;
  list-style: circle;
}

.rn-body code,
.rn-body__code {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-sunken);
  color: var(--ui-text);
  font-family: var(--ui-font-mono);
  font-size: 0.9em;
}

.rn-body code {
  padding: 0.05em 0.3em;
}

.rn-body__code {
  margin: 0;
  padding: var(--ui-space-3);
  overflow-x: auto;
  line-height: 1.45;
  white-space: pre;
}

.rn-body strong {
  font-weight: var(--ui-weight-semibold);
}

/* One release of a range, as a row that opens */

.rn-release__name {
  overflow-wrap: anywhere;
}

.rn-summary {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 0 0 1.1rem;
  max-width: 44rem;
  list-style: disc;
  overflow-wrap: anywhere;
}

.rn-summary li::marker {
  color: var(--ui-text-subtle);
}

.rn-summary .rn-summary__more {
  list-style: none;
  color: var(--ui-text-subtle);
}

.rn-release .ui-disclosure__summary p {
  margin: 0;
}

.rn-release .ui-disclosure__summary p + p,
.rn-release .ui-disclosure__summary ul + p {
  margin-top: var(--ui-space-1);
}

.rn-release__open {
  display: grid;
  gap: var(--ui-space-3);
  justify-items: start;
  min-width: 0;
}

.rn-release__open > .rn-body,
.rn-release__open > .ui-disclosure {
  width: 100%;
}

.rn-release__open p {
  margin: 0;
}

.rn-release__link,
.versions__external {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  font-size: var(--ui-text-sm);
}

.rn-folded {
  display: grid;
  gap: var(--ui-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-folded__build {
  display: grid;
  gap: var(--ui-space-1);
  border-left: 2px solid var(--ui-border-strong);
  padding-left: var(--ui-space-3);
}

.rn-folded__name {
  margin: 0;
  color: var(--ui-text);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-semibold);
}

.rn-folded__date {
  margin-left: var(--ui-space-2);
  color: var(--ui-text-muted);
  font-weight: var(--ui-weight-regular);
}

/* A range: what is new for one component of one package */

.rn-range {
  display: grid;
  gap: var(--ui-space-3);
  min-width: 0;
  font-family: var(--ui-font);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading);
  color: var(--ui-text);
  text-align: left;
}

.rn-range__loading {
  display: grid;
  gap: var(--ui-space-2);
}

.rn-range__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-3);
}

.rn-range__title p,
.rn-range__older {
  margin: 0;
}

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

/* The Versions screen */

.versions__panel {
  gap: var(--ui-space-5);
}

.versions__ask-problem {
  margin-top: var(--ui-space-3);
}

/* On a phone the releases come first; the facts of the product follow them. */
@media (max-width: 639px) {
  .versions__facts {
    order: 2;
  }
}

.versions__toolbar {
  padding: var(--ui-space-4) var(--ui-space-5) 0;
}

.versions__problem {
  padding: 0 var(--ui-space-5) var(--ui-space-5);
}

.versions__release {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

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

/* The first line of the notes: one line, cut off with dots; the panel has the rest. */
.versions__line {
  display: -webkit-box;
  max-width: 34rem;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow-wrap: anywhere;
}

.versions__line--none {
  color: var(--ui-text-subtle);
}

.versions__runs {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.versions__pages {
  flex: 1;
}

.versions__part {
  display: grid;
  gap: var(--ui-space-3);
  justify-items: start;
  min-width: 0;
}

.versions__part > .ui-kv,
.versions__part > .ui-alert,
.versions__part > .rn-body,
.versions__part > .ui-disclosure,
.versions__part > .ui-empty {
  width: 100%;
}

.versions__part + .versions__part {
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-5);
}

.versions__part-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.versions__places {
  display: grid;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.versions__preview-part {
  margin: var(--ui-space-4) 0 var(--ui-space-2);
}

/* Why the main button of a panel cannot be pressed, in words beside it. */
.versions__blocked {
  margin-right: auto;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}