/*
 * Settings (step 8) — the tab strip and the tab body, and the identity block on
 * the My Account tab.
 *
 * Nothing else is local to this page: the tabs hold the People page and the
 * sections that used to be account-menu modals, so their rows, forms and
 * sections are already dressed by people.css and app.css. The strip is modelled
 * on `.admin-tabs` in admin.css rather than shared with it — that stylesheet is
 * loaded by admin.html alone, and the console is a different application.
 */

.set-body { padding: 22px 28px 34px; }

.set-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.set-tab {
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  transition: color .14s, border-color .14s;
}
.set-tab:hover { color: var(--text); }
.set-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.set-tab-panel { display: none; }
.set-tab-panel.active { display: block; }

/* ── who you are signed in as ────────────────────────────────────────────── */

.set-ident {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0 0 16px;
  font-size: 13.5px;
}
.set-ident dt {
  font-size: max(11px, var(--label-min-size, 0px)); font-weight: 600; text-transform: var(--label-case, uppercase); letter-spacing: var(--label-tracking, .05em);
  color: var(--muted); align-self: center;
}
.set-ident dd { margin: 0; }

/* ── API keys ────────────────────────────────────────────────────────────── */
/*
 * The rows are people.css's (`.ppl-rows` / `.ppl-row`), as every list in
 * Settings is: what is local here is the column count and the four states a key
 * can be in. `expiring` is the one worth a colour of its own — it is a warning
 * about a key that still works, and the whole point of showing it is that
 * somebody renews the integration before it stops.
 */

.key-row {
  grid-template-columns: 1.2fr 90px 1.8fr 1.2fr 130px 110px 130px 240px;
}
.key-desc, .key-who { display: block; font-size: 11px; color: var(--faint); font-weight: 400; }
.key-caps { display: flex; flex-wrap: wrap; gap: 2px 0; }
.key-last4 { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.key-inline { font-family: var(--mono); font-size: 12px; }

.key-status { font-weight: 600; }
.key-status.expiring { color: var(--warn, #c2410c); }
.key-status.expired  { color: var(--muted); }
.key-status.revoked  { color: var(--rose); }

.key-event-row { grid-template-columns: 170px 1.6fr 1.4fr 130px; align-items: start; }
.key-outcome { font-weight: 600; }
.key-outcome.refused { color: var(--rose); }