/* Copyright Ayers Electronics Inc. All rights reserved. */
/* credits face. */

/* The credits face: a page of its own over Settings. It stands above the fixed page frame the way the
   report face does (its own z-index; the modal base sits under #guide). */
#settingsCredits {
  z-index: 35;
}
/* A solid ground: nothing of the Settings page reads through the table. */
#settingsCredits.modal-overlay {
  background: var(--bg);
}
/* The card is the page: no frame of its own, the title and the lead at the left, the table filling the
   room under them and scrolling inside it under the D-pad. */
.credits-card {
  width: min(94vw, 1500px);
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}
.credits-card .dialog-title {
  font-size: var(--type-title);
  text-align: left;
}
/* The lead keeps clear of the X in the card's corner. */
.credits-card .dialog-meta {
  max-width: 70ch;
  margin-left: 0;
  padding: 0 48px 0 0;
  text-align: left;
}
/* tabindex="-1" so js/settings-credits.js's own scroll methods work; nothing on it presses, so it
   carries no ring, only the floor's default outline dropped. */
.credits-body {
  flex: 1 1 auto;
  overflow: auto;
  margin-top: 14px;
  text-align: left;
  outline: none;
}
/* Each section's name stays in view over its own rows while they scroll. */
.credits-body h3 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 18px 0 8px;
  font-size: var(--type-heading);
  color: var(--text);
  background: var(--bg);
  border-bottom: 2px solid var(--accent-text);
}
.credits-body table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--type-body);
  margin-bottom: 10px;
}
.credits-body th {
  text-align: left;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 10px 14px 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.credits-body th:nth-child(1) {
  width: 34%;
}
.credits-body th:nth-child(2) {
  width: 16%;
}
.credits-body th:nth-child(3) {
  width: 26%;
}
.credits-body td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  color: var(--text);
  overflow-wrap: anywhere;
}
.credits-body td.dim {
  color: var(--muted);
}