/* app-card — package details page */
.app-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

@media (min-width: 960px) {
  .app-card {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .app-card__hero {
    grid-column: 1 / -1;
  }
}

.app-card__main,
.app-card__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.app-card__main > .window + .window,
.app-card__side > .window + .window {
  margin-top: 0;
}

.app-card__hero-body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-5);
}

@media (min-width: 600px) {
  .app-card__hero-body {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
  }
}

.app-card__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

@media (min-width: 600px) {
  .app-card__icon {
    width: 96px;
    height: 96px;
  }
}

.app-card__heading {
  min-width: 0;
}

.app-card__name {
  font-size: var(--fs-xxl);
  overflow-wrap: anywhere;
}

.app-card__developer {
  color: var(--c-text-dim);
}

.app-card__short {
  margin-top: var(--sp-3);
  color: var(--c-text);
}

.app-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.app-card__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 600px) {
  .app-card__actions {
    grid-column: auto;
    align-items: stretch;
    min-width: 220px;
  }
}

.app-card__download-meta {
  color: var(--c-text-faint);
  font-size: var(--fs-s);
  text-align: center;
}

.app-card__description {
  font-size: var(--fs-m);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* key/value spec list */
.specs {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
}

.specs__key,
.specs__value {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-bg-row);
}

.specs__key {
  color: var(--c-text-dim);
}

.specs__value {
  overflow-wrap: anywhere;
}

/* copyable code line (hashes, direct links) */
.code-line {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  min-width: 0;
}

.code-line + .code-line {
  margin-top: var(--sp-3);
}

.code-line__label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--c-text-dim);
  font-size: var(--fs-s);
}

.code-line__value {
  flex: 1;
  min-width: 0;
  padding: 3px var(--sp-3);
  border: 1px solid;
  border-color: var(--bevel-sunken);
  background: var(--c-bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  overflow-wrap: anywhere;
  user-select: all;
}

.related {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
}

.related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid;
  border-color: var(--bevel-raised);
  color: var(--c-text);
}

.related__link:hover {
  background: var(--c-bg-hover);
  text-decoration: none;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: var(--c-text-faint);
  font-size: var(--fs-s);
  list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "›";
  margin-right: var(--sp-2);
}