/* Settings — satellite of the skill map. Same GPS tokens. */

.st-shell {
  max-width: 640px;
  margin: 0 auto;
  padding:
    calc(16px + env(safe-area-inset-top))
    calc(20px + env(safe-area-inset-right))
    calc(48px + env(safe-area-inset-bottom))
    calc(20px + env(safe-area-inset-left));
}

.st-lede {
  margin: 0 0 28px;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  color: var(--text);
}

.st-copy {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-wrap: pretty;
}

.st-section {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.st-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}

.st-card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}

.st-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.st-row:last-child { border-bottom: 0; padding-bottom: 0; }
.st-row:first-child { padding-top: 0; }

.st-place {
  min-width: 0;
}
.st-place strong {
  display: block;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.st-place span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.st-field {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--inset);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  padding: 0 14px;
}
.st-field:focus {
  outline: none;
  border-color: var(--signal);
}

.st-mint {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.st-mint .st-field { flex: 1; }

.st-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.st-btn {
  appearance: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--tint);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
}
.st-btn:active { transform: scale(0.97); }
.st-btn.signal {
  border-color: var(--signal);
  background: var(--signal-dim);
  color: var(--signal);
}
.st-btn.ghost {
  background: transparent;
}
.st-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.st-pre {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--inset);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  overflow-x: auto;
  white-space: pre;
}

.st-key {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--signal-dim);
  background: var(--signal-dim);
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}

.st-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--faint);
}

.st-empty {
  color: var(--faint);
  font-size: 15px;
  line-height: 1.45;
}

.st-err {
  color: rgba(255, 120, 120, 0.9);
}

html[data-theme="light"] .st-err {
  color: #b42318;
}

@media (max-width: 599px) {
  .st-mint { flex-direction: column; }
  .st-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .st-row .st-btn { align-self: stretch; }
}