/* Settings → API keys. Builds on app.css (forms, buttons, callout) and research.css (publish panel). */

.app-side__item.is-disabled {
  color: var(--color-ink-faint);
  cursor: default;
}

.keys-preview {
  margin-bottom: var(--space-5);
}

.keys-balance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

@media (min-width: 720px) {
  .keys-balance {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

.keys-balance > div {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.keys-balance dt {
  color: var(--color-ink-faint);
  font-size: 12px;
}

.keys-balance dd {
  font-size: var(--text-xl);
}

.keys-balance__note {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .keys-balance__note {
    grid-column: auto;
  }
}

.keys-balance__note dd {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.keys-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.keys-section__title {
  font-size: var(--text-2xl);
}

/* ------------------------------------------------------------------ create and reveal */

.key-form,
.key-reveal {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.key-form .form-actions,
.key-reveal .form-actions {
  margin: 0;
}

.key-form__row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 559px) {
  .key-form__row {
    grid-template-columns: 1fr;
  }
}

.key-form__row .field[hidden] {
  display: none;
}

.key-choices {
  display: grid;
  gap: var(--space-2);
}

.key-choice {
  flex-wrap: wrap;
  background: #fff;
}

.key-choice .muted {
  font-size: 13px;
}

.key-reveal {
  border-color: var(--color-blue-100);
  background: var(--color-blue-50);
}

.key-reveal__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.key-reveal__title .icon {
  color: var(--color-blue-600);
}

.key-reveal__value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: #fff;
}

.key-reveal__value code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 13px;
}

.key-reveal__note {
  font-size: 13px;
}

/* ------------------------------------------------------------------ list */

.keys-list {
  display: grid;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
}

.key-row + .key-row {
  border-top: 1px solid var(--color-line);
}

.key-row.is-confirming {
  background: var(--color-danger-50);
}

.key-row__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.key-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
}

.key-row__prefix {
  color: var(--color-ink-muted);
  font-size: 13px;
}

.key-badge {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-blue-50);
  color: var(--color-blue-600);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
}

.key-badge--test {
  background: var(--color-surface-sunken);
  color: var(--color-ink-muted);
}

.key-badge--expired {
  background: var(--color-amber-50);
  color: var(--color-amber-500);
}

.key-row__facts {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 13px;
}

@media (min-width: 720px) {
  .key-row__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.key-row__facts dt {
  color: var(--color-ink-faint);
  font-size: 12px;
}

.key-row__actions {
  display: flex;
  gap: var(--space-4);
  align-self: start;
}

.key-row__confirm {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.key-row__confirm .form-actions {
  margin: 0;
}

.keys-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}