/* detail-screens — layout for the menu, Health, Money, and Sync screens. */

.detail__title {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 700;
}

/* Menu: a vertical list of focusable entries. */
.menu__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Detail/Sync body: label/value rows. */
.detail__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  background: var(--hud-panel);
  border: 1px solid var(--hud-panel-border);
  border-radius: 14px;
  padding: 16px 20px;
}

.detail__label {
  font-size: 18px;
  color: var(--hud-muted);
}

.detail__value {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.detail__value--stale {
  color: var(--hud-muted);
}

/* Action buttons pinned to the bottom of the screen. */
.detail__footer {
  margin-top: auto;
  display: flex;
  gap: 12px;
}

.detail__footer .btn {
  flex: 1;
  text-align: center;
}