/*
 * The Packages list, the page of one package with its tabs, and the dialog that makes a package. Everything here is
 * layout around the components of js/ui and uses the tokens of css/design only, so both themes follow by
 * themselves; a class starts with pk-.
 */

/* Small pieces of text the screens share */

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

.pk-sub--clip {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-strong {
  color: var(--ui-text);
  font-weight: var(--ui-weight-semibold);
}

.pk-flow {
  margin: 0;
  line-height: var(--ui-leading);
  overflow-wrap: anywhere;
}

.pk-grow {
  flex: 1;
}

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

.pk-stack--cell {
  align-items: flex-start;
}

.pk-intro {
  max-width: 62rem;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading);
}

/* What a role may not do, or a remark that belongs to a card, said once and quietly */

.pk-role {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading);
}

.pk-role .ui-icon {
  flex: none;
  margin-top: 3px;
}

.pk-role--center {
  justify-content: center;
}

.pk-role--page {
  margin-bottom: var(--ui-space-4);
}

/* Why a button cannot be pressed, in words beside it */

.pk-why {
  flex: 1 1 12rem;
  margin: 0 auto 0 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  text-align: left;
}

.pk-field-error {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-critical-text);
  font-size: var(--ui-text-sm);
}

/* No packages yet: the three steps that bring the first one live */

.pk-first-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-5);
  width: 100%;
}

.pk-first {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.pk-first__step {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface-sunken);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.pk-first__step strong {
  color: var(--ui-text);
  font-weight: var(--ui-weight-semibold);
}

.pk-first__number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  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;
}

/* The list */

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

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

.pk-name__link {
  color: var(--ui-text);
  font-weight: var(--ui-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.pk-name__link:hover,
.pk-quiet-link:hover {
  color: var(--ui-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pk-quiet-link {
  color: var(--ui-text);
  text-decoration: none;
}

.pk-chip-link {
  display: inline-flex;
  border-radius: var(--ui-radius-full);
  text-decoration: none;
}

.pk-chip-link:hover .ui-chip__label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* What runs: one short line per component */

.pk-runs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pk-run {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--ui-space-2);
  font-size: var(--ui-text-sm);
}

.pk-run__kind {
  min-width: 3.25rem;
  color: var(--ui-text-muted);
}

.pk-run__version {
  color: var(--ui-text);
}

.pk-run--off .pk-run__version {
  color: var(--ui-text-muted);
}

.pk-run__note {
  color: var(--ui-text-muted);
}

.pk-run__next {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  color: var(--ui-warning-text);
}

/* Mail, automatic rollout and backups as quiet marks: they speak up only when something is not in place */

.pk-marks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pk-mark {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ui-space-1);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.pk-mark .ui-icon {
  flex: none;
  margin-top: 3px;
}

.pk-mark--wrong {
  color: var(--ui-warning-text);
  font-weight: var(--ui-weight-medium);
}

/* A reason in a chip is as long as it is; in the list it is cut where the cell ends, and the line under it says more. */
.pk-table .ui-chip {
  max-width: 18rem;
}

.pk-table .ui-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Where the list does not fit it scrolls inside its card instead of pushing the page sideways. Its header then
 * stays at the top of that card: the place it would keep under the top bar belongs to the page, not to the card.
 */
@media (max-width: 1279px) {
  .pk-table {
    --ui-sticky-top: 0;
    overflow-x: auto;
  }
}

/* The page of one package */

.pk-page {
  min-width: 0;
}

.pk-skeleton-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
}

.pk-skeleton-head__icon {
  flex: none;
  width: 2.5rem;
}

.pk-skeleton-head__text {
  flex: 0 1 20rem;
}

.pk-attention {
  margin-bottom: var(--ui-space-4);
  overflow-wrap: anywhere;
}

.pk-attention__more {
  display: block;
  margin-top: var(--ui-space-1);
  color: var(--ui-text-muted);
}

.pk-link-button {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.pk-link-button:focus-visible {
  outline: none;
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-focus-ring);
}

.pk-card-alert {
  margin: var(--ui-space-4) var(--ui-space-5) 0;
}

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

/* What needs attention, as a list on the overview */

.pk-issues {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-issue {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  border-top: 1px solid var(--ui-border);
}

.pk-issue:first-child {
  border-top: 0;
  padding-top: 0;
}

.pk-issue:last-child {
  padding-bottom: 0;
}

.pk-issue > .ui-chip {
  flex: none;
  min-width: 6.25rem;
}

.pk-issue__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pk-issue__title {
  font-weight: var(--ui-weight-medium);
}

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

/* Before the first install: the steps in order, the next one marked */

.pk-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-step {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) 0;
  border-top: 1px solid var(--ui-border);
}

.pk-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.pk-step:last-child {
  padding-bottom: 0;
}

.pk-step__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--ui-border-control);
  border-radius: var(--ui-radius-full);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pk-step--next .pk-step__mark {
  border-color: var(--ui-primary-fill);
  background: var(--ui-primary-fill);
  color: var(--ui-on-primary);
}

.pk-step--done .pk-step__mark {
  border-color: var(--ui-good-text);
  background: var(--ui-good-bg);
  color: var(--ui-good-text);
}

.pk-step__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pk-step__title {
  font-weight: var(--ui-weight-medium);
}

.pk-step--done .pk-step__title {
  color: var(--ui-text-muted);
}

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

/* The components on the overview: what runs, where it answers, how it does */

.pk-components {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.pk-component:first-child {
  border-top: 0;
  padding-top: 0;
}

.pk-component:last-child {
  padding-bottom: 0;
}

.pk-component__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-3);
}

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

.pk-component__runs {
  flex: 1 1 12rem;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.pk-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-address {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--ui-space-2);
}

.pk-address__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  overflow-wrap: anywhere;
}

.pk-address__name {
  color: var(--ui-text-muted);
  overflow-wrap: anywhere;
}

.pk-certificate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-3);
  margin: 0;
}

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

.pk-open-rollout__text {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Facts with an icon, a title and a sentence: mail, new releases, what is in a backup */

.pk-settings {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-setting {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
}

.pk-setting > .ui-icon {
  flex: none;
  margin-top: 3px;
  color: var(--ui-text-muted);
}

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

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

.pk-danger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

/* Components and names */

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

/* Aliases: a name and what it does, row by row */

.pk-aliases {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

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

.pk-alias {
  min-width: 0;
}

.pk-alias__name {
  flex: 2 1 14rem;
  min-width: 0;
}

.pk-alias__mode {
  flex: 1 1 12rem;
  min-width: 0;
}

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

@media (max-width: 639px) {
  .pk-alias__row {
    flex-wrap: wrap;
  }

  .pk-alias__name {
    flex-basis: 100%;
  }
}

/* What saving leads to, and what will be made: a list in a quiet box */

.pk-plan {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface-sunken);
}

.pk-plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: 0;
  padding-left: var(--ui-space-5);
  list-style: disc;
  font-size: var(--ui-text-sm);
  overflow-wrap: anywhere;
}

/* First users */

.pk-people {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-person {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--ui-text-sm);
  overflow-wrap: anywhere;
}

.pk-person .ui-icon {
  flex: none;
  color: var(--ui-text-muted);
}

.pk-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.pk-legend {
  margin-bottom: var(--ui-space-2);
  padding: 0;
  color: var(--ui-text);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

/* The dialog that makes a package */

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

/* A long step scrolls inside the dialog, so the steps above it and the buttons under it stay in sight. */
.pk-wz__step {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  min-width: 0;
  min-height: 16rem;
  max-height: max(16rem, calc(100vh - 24rem));
  overflow-y: auto;
  padding: 2px var(--ui-space-2) 2px 2px;
}

.pk-wz__step > * {
  flex: none;
}

.pk-wz__key {
  margin: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-4);
  background: var(--ui-surface-sunken);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  overflow-wrap: anywhere;
}

.pk-wz__key strong {
  color: var(--ui-text);
}

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

.pk-wz__component {
  display: grid;
  gap: var(--ui-space-3) var(--ui-space-5);
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3) var(--ui-space-4);
}

.pk-wz__component--on {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-sunken);
}

@media (min-width: 760px) {
  .pk-wz__component--on {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.pk-wz__names {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-4);
}

.pk-wz__names-title {
  margin: 0;
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-semibold);
}

.pk-wz__aliases {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

.pk-wz__plan {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: 0;
  list-style: none;
}

.pk-wz__line {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  border-top: 1px solid var(--ui-border);
  padding: var(--ui-space-3) var(--ui-space-4);
  line-height: var(--ui-leading);
  overflow-wrap: anywhere;
}

.pk-wz__line:first-child {
  border-top: 0;
}

.pk-wz__line .ui-icon {
  flex: none;
  margin-top: 3px;
  color: var(--ui-text-muted);
}

.pk-wz__line--warning,
.pk-wz__line--warning .ui-icon {
  color: var(--ui-warning-text);
}

/* Folded to cards on a phone, a cell reads from the right: its lines follow. */
@container (max-width: 34rem) {
  .pk-stack--cell,
  .pk-runs,
  .pk-marks {
    align-items: flex-end;
  }

  .pk-run {
    justify-content: flex-end;
  }

  .pk-run__kind {
    min-width: 0;
  }

  .pk-sub--clip {
    max-width: 13rem;
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 639px) {
  .pk-issue,
  .pk-step {
    flex-wrap: wrap;
  }

  .pk-issue__text,
  .pk-step__text {
    flex-basis: 60%;
  }
}