/* API keys, service accounts, settings and the Runs page (group B). Layout only: every part (header, section heading,
   table, buttons, fields, badges, notes, asides, sheet, empty state, row menu) comes from app.css and console.css, and
   every size, spacing, radius and colour here is a token. */

/* API keys: the policy line sits between the header and the filters; the filters are one row */
.aside.policy { margin-top: 0; margin-bottom: var(--s-3); }
.filters { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); flex-wrap: wrap; }
/* a revoked key's Expires cell ("Revoked on <date>") may take two lines, so the Scopes column keeps room for its badges */
.tbl td.can-wrap { white-space: normal; }


/* settings: rows of a label (and its hint), a value or control, and an action */
.set-sec { margin-bottom: var(--s-4); }
.set-row { display: grid; grid-template-columns: 220px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.set-row:first-child { border-top: 0; }
.set-list { margin-top: var(--s-2); }
.set-l { display: flex; flex-direction: column; min-width: 0; }
.set-row .val { min-width: 0; overflow-wrap: anywhere; }
.inline-edit { display: flex; gap: var(--s-2); align-items: center; }
.inline-edit .input { max-width: 360px; }
/* a ghost action's label ends where a bordered button's edge does: its padding hangs into the row's */
.set-row > .btn.ghost { margin-right: calc(-1 * var(--s-3)); }

/* managed Nenya (the Runs page and the overview): one panel, its empty state at the overview's size */
.runs > .empty { padding: var(--s-6) var(--s-4); }

@media (max-width: 760px) {
  .set-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .set-row > .btn, .set-row > a.btn { justify-self: start; }
  .set-row > .btn.ghost { margin-left: calc(-1 * var(--s-3)); margin-right: 0; }
}