/* Veil app grid. At 1152px, 256px context + 32px gap + 864px work area. */
.api-page { padding-top: var(--s6); }
.api-head { margin-bottom: var(--s5); }
.api-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 var(--s3); }
.api-intro { color: var(--muted); font-size: var(--fs-section); max-width: 72ch; margin: 0; }
.api-mode { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-top: var(--s4); }
.api-mode a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.api-mode a[aria-current="page"] { color: var(--text); font-weight: 600; }
.api-owner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-block: var(--s5); }
.api-owner h2, .api-section h2, .api-secret h2, #staffBrowse > h2 { font-size: var(--fs-section); font-weight: 600; margin: 0 0 var(--s3); }
.api-owner-controls { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.api-owner h2 { margin: 0; }
.api-owner-controls select { min-width: 240px; max-width: 100%; }
.api-owner-controls input { max-width: 240px; }
.api-page input:not([type="checkbox"]), .api-page select, .api-page textarea { border: 1px solid var(--control); background: var(--panel); color: var(--text); border-radius: var(--radius-nested); min-height: 40px; padding: var(--s2) var(--s3); font: inherit; }
.api-page textarea { resize: vertical; }
.api-message { margin-block: var(--s4); color: var(--muted); }
.api-message[data-state="error"], .api-warning { color: var(--negative); }
.api-warning { padding-block: var(--s3); }
/* the allowance (28 October 2026): one strong number, the requests left this minute, at the stamp's size; the other two
   beside it at a step down, on the page, divided by space and a rule, not three boxes of equal weight */
.api-quota { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--col-gap); margin-top: var(--s5); padding-block: var(--s4); border-block: 1px solid var(--rule); align-items: end; }
.api-quota > div { min-width: 0; }
.api-quota h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; color: var(--muted); margin: 0 0 var(--s1); }
.api-quota .api-figure { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 var(--s1); color: var(--text); }
.api-quota > div:first-child .api-figure { font-size: var(--fs-stamp); line-height: var(--lh-stamp); letter-spacing: -0.025em; }
.api-quota p { color: var(--muted); margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.api-updated { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; }
.api-updated .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); }
.api-section { display: grid; grid-template-columns: 256px minmax(0,1fr); gap: var(--s6); align-items: start; margin-top: var(--s6); }
.api-section-title p { color: var(--muted); margin: 0; max-width: 36ch; }
.api-form { display: grid; gap: var(--s3); align-items: start; }
.api-form label, .api-form legend { font-size: var(--fs-body); font-weight: 500; }
.api-form label:not(.api-check):not(:first-child) { margin-top: var(--s2); }
.api-form input:not([type="checkbox"]), .api-form select, .api-form textarea { width: 100%; background: var(--ground); }
.api-form > .btn { justify-self: start; margin-top: var(--s2); }
.api-form fieldset { border: 0; padding: 0; margin: var(--s2) 0; }
.api-form legend { margin-bottom: var(--s3); }
.api-check { display: flex; align-items: center; gap: var(--s3); min-height: 32px; }
.api-check input { accent-color: var(--text); }
.api-form p { margin: 0; }
.api-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4) var(--s5); }
.api-create-form { grid-template-columns: minmax(0,1fr) 180px; }
.api-field { display: grid; gap: var(--s2); min-width: 0; }
.api-form .api-field label { margin: 0; }
.api-wide { grid-column: 1 / -1; }
.api-form-grid fieldset { margin: 0; }
.api-form-grid legend { margin-bottom: var(--s2); }
.api-form-grid > .btn { margin-top: 0; }
.api-scope-options { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.api-account-suspend { align-self: start; margin-top: var(--s5); }
.api-secret { margin-top: var(--s6); }
.api-secret pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ground); border-radius: var(--radius-nested); padding: var(--s4); }
.api-secret code, .api-key-prefix, .api-audit pre code { font-family: var(--mono); font-weight: 400; }
.api-rows { display: grid; gap: var(--s3); }
.api-rows + .btn, .api-audit + .btn { margin-top: var(--s3); }
/* a key is a row of the register, ruled, on the page */
.api-key-row { padding: var(--s4) 0; border-top: 1px solid var(--rule); min-width: 0; }
.api-rows { gap: 0 !important; }
.api-key-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.api-key-head h3 { font-size: var(--fs-section); margin: 0; overflow-wrap: anywhere; }
.api-key-head .pill { margin-left: auto; }
.api-key-meta { color: var(--muted); margin-block: var(--s3); overflow-wrap: anywhere; }
.api-key-meta p { margin: var(--s2) 0; }
.api-key-prefix { color: var(--text); }
.api-key-actions { margin-top: var(--s4); }
.api-key-form { margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.api-key-form summary { cursor: pointer; min-height: 32px; }
.api-key-form form { margin-top: var(--s3); }
.api-usage { overflow-x: auto; }
.api-usage table { width: 100%; text-align: right; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.api-usage th, .api-usage td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); }
.api-usage th { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.api-usage th:first-child, .api-usage td:first-child { text-align: left; }
.api-audit details { padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.api-audit summary { cursor: pointer; overflow-wrap: anywhere; }
.api-audit p { margin-top: var(--s3); overflow-wrap: anywhere; }
.api-audit pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: var(--s3); padding: var(--s4); background: var(--panel); border-radius: var(--radius-nested); }
#staffBrowse { margin-top: var(--s6); }
.api-page :focus-visible { outline-color: var(--text); }
.api-page .btn:disabled { opacity: .55; cursor: wait; }
@media(max-width:960px){ .api-section { grid-template-columns: minmax(0,1fr); gap: var(--s4); } .api-section-title p { max-width: 72ch; } }
@media(max-width:600px){
 .api-page { padding-top: var(--s5); }
 .api-quota { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s3) var(--s4); }
 .api-quota > div:first-child { grid-column: 1 / -1; }
 .api-owner-controls { align-items: stretch; }
 .api-owner { align-items: stretch; gap: var(--s3); }
 .api-owner > h2, .api-owner-controls { width: 100%; }
 .api-owner-controls select { min-width: 0; flex: 1; }
 .api-owner-controls input { max-width: none; min-width: 0; flex: 1; }
 .api-page input:not([type="checkbox"]), .api-page select, .api-page textarea { font-size: 16px; min-height: 44px; }
 .api-page .btn, .api-key-form summary { min-height: 44px; }
 .api-key-row { padding: var(--s4) 0; }
 .api-section { margin-top: var(--s6); }
 .api-usage { padding: var(--s3); }
 .api-usage th, .api-usage td { padding-inline: var(--s1); font-size: var(--fs-small); }
 .api-usage th:first-child { width: 30%; }
 .api-key-head .pill { margin-left: 0; }
 .api-form-grid { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
 .api-account-suspend { margin-top: 0; }
 .api-check { min-height: 44px; }
}

/* the keys as a register (pass 3, 29 October 2026): the columns of the card's keys register (name, prefix, allowed calls,
   since, status, action), ruled rows on the page, a grey second line only for what the columns leave out, and the new key
   as the register's last row: its fields on one line, no box */
.api-register { margin-top: var(--s6); }
.api-register-head h2 { font-size: var(--fs-section); font-weight: 600; margin: 0; }
.api-register-head p { margin: var(--s1) 0 0; max-width: 72ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
/* the request history and the private activity follow the register's shape: the title, a grey line, then the rows */
#usageSection, #activitySection { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
#usageSection .api-section-title h2, #activitySection .api-section-title h2 { margin: 0; }
#usageSection .api-section-title p, #activitySection .api-section-title p { max-width: 72ch; margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.api-reg-cols, .api-key-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(88px, auto); column-gap: var(--s4); align-items: baseline; }
.api-reg-cols { margin-top: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.api-reg-cols .r, .api-key-row .c-since { text-align: right; }
.api-register.empty .api-reg-cols { display: none; }
.api-empty { margin: var(--s3) 0 0; }
.api-key-row { padding: var(--s3) 0; border-top: 0; border-bottom: 1px solid var(--rule); }
.api-key-row h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.api-key-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.api-key-row .c-prefix { font-size: var(--fs-small); overflow-wrap: anywhere; }
.api-key-row .c-scopes, .api-key-row .c-state { color: var(--muted); }
.api-key-row .c-since { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.api-key-row .state-revoked { color: var(--pill-negative-ink); }
.api-key-row .state-suspended, .api-key-row .state-expired { color: var(--pill-warning-ink); }
.api-key-row.off h3 { color: var(--muted); }
.api-key-row .c-act { justify-self: end; text-align: right; min-width: 0; }
.api-key-row .c-act > .btn { height: 28px; padding: 0 var(--s3); font-size: var(--fs-small); }
.api-key-row .api-key-form { margin: 0; padding: 0; border: 0; }
.api-key-row .api-key-form summary { min-height: 0; color: var(--muted); font-weight: 500; list-style: none; }
.api-key-row .api-key-form summary::-webkit-details-marker { display: none; }
.api-key-row .api-key-form summary:hover { color: var(--text); }
/* an open action takes the row's full width under it */
.api-key-row .c-act:has(details[open]) { grid-column: 1 / -1; justify-self: stretch; text-align: left; margin-top: var(--s3); }
.api-key-row details[open] { padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--panel); }
.api-key-row details[open] summary { color: var(--text); }
.api-key-row details[open] p { margin: var(--s2) 0 var(--s3); color: var(--text); }
.api-create-row { padding-top: var(--s4); }
.api-create-row h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; margin: 0 0 var(--s3); }
.api-create-line { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto auto; gap: var(--s3) var(--s4); align-items: end; }
.api-create-line .api-check { white-space: nowrap; }
.api-create-line input, .api-create-line select { width: 100%; background: var(--ground); }
.api-create-line label, .api-create-line legend { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.api-create-line fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.api-create-line legend { margin-bottom: var(--s2); }
.api-create-line .api-scope-options { min-height: 40px; align-items: center; gap: var(--s1) var(--s4); }
.api-create-line .api-check { min-height: 40px; }
.api-c-go { align-self: end; }
.api-create-help { margin: var(--s3) 0 0; max-width: 90ch; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
#secretPanel { margin-top: var(--s5); }
@media (max-width: 960px) {
  .api-create-line { grid-template-columns: minmax(0, 1fr) 150px; }
  .api-c-scopes, .api-c-go { grid-column: 1 / -1; }
  .api-c-go { justify-self: start; }
}
@media (max-width: 760px) {
  .api-reg-cols { display: none; }
  .api-key-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .api-key-row .c-name { grid-column: 1; }
  .api-key-row .c-state { grid-column: 2; grid-row: 1; text-align: right; }
  .api-key-row .c-prefix, .api-key-row .c-scopes, .api-key-row .c-since { grid-column: 1 / -1; text-align: left; font-size: var(--fs-small); }
  .api-key-row .c-act { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .api-create-line { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- UX pass, 29 October 2026 ---------- */
/* the allowed calls in words, one per line in their column */
.api-key-row .c-scopes { display: grid; gap: 2px; }
.api-scope-word { display: block; }
/* the second step of a new key: what it will be, in words, with the one filled button */
.api-review { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--panel); max-width: 760px; }
.api-review-t { font-weight: 600; }
.api-review-p { margin: var(--s1) 0 var(--s3); color: var(--muted); }
.api-review .actions-row, .api-secret .actions-row, .api-revoke .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
/* the secret, once: the code and its copy button side by side, and the line that says it was copied */
.api-secret { margin-top: var(--s4); padding: var(--s4); border-radius: var(--radius-nested); background: var(--panel); }
.api-secret h2 { margin-bottom: var(--s1) !important; }
.api-secret > p { color: var(--muted); margin: 0; }
.api-secret-box { display: flex; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s3); }
.api-secret-box pre { flex: 1 1 auto; min-width: 0; margin: 0; background: var(--ground); }
.api-secret-box .btn { flex: none; }
.api-secret-state { min-height: var(--lh-small); margin: var(--s2) 0 var(--s3) !important; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text) !important; }
/* revoking asks once, in place, across the row, on the danger's pale ground, naming the key */
.api-key-row .c-act:has(.api-revoke) { grid-column: 1 / -1; justify-self: stretch; text-align: left; margin-top: var(--s3); }
.api-revoke { padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); }
.api-revoke p { margin: 0 0 var(--s3); }
.api-revoke b { font-weight: 600; color: var(--pill-negative-ink); }
.api-revoke span { color: var(--text); }
.api-key-row .c-act > .text-btn { font-size: var(--fs-small); }
@media (max-width: 600px) {
  .api-secret-box { flex-direction: column; align-items: stretch; }
}
#keysSection, #usageSection, #activitySection { scroll-margin-top: 64px; }

/* Stability (polish pass, 30 October 2026). While the page reads this browser's card its footer waits out of sight; the
   status line keeps one line even when it has nothing to say ("Saving…" comes and goes without moving the keys); "Staff
   tools", which only the staff get, comes last in its line, so it moves nothing when it appears. */
@media (scripting: enabled) {
  main:has(#apiMessage:not([data-state])) + .page-end,
  main:has(#apiContent[hidden]):has(#apiLogin[hidden]):not(:has(#apiMessage[data-state="error"])) + .page-end { visibility: hidden; }
  /* ...and the step after (follow-ups, 30 October 2026): the card is read, the account is not yet, and the footer would
     stand under the owner's line for a moment before the keys push it 420 px down */
  main:has(#apiContent:not([hidden])):has(#accountDetails[hidden]):has(#staffBrowse[hidden]):not(:has(#apiMessage[data-state="error"])) + .page-end { visibility: hidden; }
}
.api-message { min-height: var(--lh-body); }
.api-mode #staffLink { order: 1; }
/* Refresh (follow-ups of the stability pass, 30 October 2026): the account read again stays where it is, dimmed while the
   answer comes, so the sections and the footer under it do not leave and come back */
#accountDetails { transition: opacity var(--t-fast) var(--ease-out); }
#accountDetails[aria-busy="true"] { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { #accountDetails { transition: none; } }