/* API keys, the key wizard, webhook deliveries and the API reference (in the app and at /api/docs).
   Same tokens as app.css: square shapes, solid fills for anything selected, colors from the variables. */

/* ---------- keys table ---------- */
.kw-keys td { vertical-align: top; }
.kw-can { display: block; white-space: nowrap; }
.kw-key { white-space: nowrap; }
dl.kw-facts { grid-template-columns: max-content minmax(0, 1fr); }
dl.kw-facts dd { overflow-wrap: anywhere; min-inline-size: 0; }
.kw-can strong { font-weight: 600; margin-inline-end: 4px; }

/* ---------- the key wizard ---------- */
.kw { display: grid; gap: 20px; padding: 20px; background: var(--ground-alt); min-inline-size: 0; }
.kw h3 { display: flex; align-items: center; }
.kw-steps { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; background: var(--band); justify-self: start; }
.kw-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.kw-steps li span { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; background: var(--ground); color: var(--ink); font-size: 11px; }
.kw-steps li.done { color: var(--ink); }
.kw-steps li[aria-current="step"] { background: var(--red); color: var(--on-red); }
.kw-steps li[aria-current="step"] span { background: var(--on-red); color: var(--red); }
.kw-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--ground-alt); }
.kw-choices button { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 0; background: var(--band); color: var(--ink); text-align: start; cursor: pointer; font: inherit; }
.kw-choices button strong { font: 500 13px/1.2 var(--font); letter-spacing: 0; text-transform: none; }
.kw-choices button span { font-size: 13px; color: var(--ink-muted); }
.kw-choices button:hover { background: var(--line-strong); }
.kw-choices button[aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.kw-choices button[aria-pressed="true"] span { color: var(--on-red); }
.kw-name { max-inline-size: 420px; }
.kw-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 24px; }
.kw-group { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.kw-group legend { padding: 0 0 6px; font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.kw-group .check { font-size: 14px; align-items: center; }
.kw-block { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; background: var(--warn); color: var(--on-warn); }
.kw-block p { margin: 0; }
.kw-block .btn.dark { background: var(--on-warn); color: var(--warn); }
.kw-sum { font-size: 14px; }
.kw-sum .kw-can { white-space: normal; }
.kw-once { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kw-once input, .kw-secret { flex: 1 1 320px; min-inline-size: 0; }
.kw-secret input { inline-size: 100%; }
.kw-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.kw-code pre { white-space: pre-wrap; word-break: break-all; }
.kw-access { display: grid; gap: 12px; }
@media (max-width: 900px) { .kw-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .kw { padding: 16px 14px; margin-inline: -4px; }
  .kw-code { grid-template-columns: minmax(0, 1fr); }
  .kw-code .btn { justify-self: start; }
}

/* ---------- webhook deliveries under a connection ---------- */
tr.kw-log > td { padding: 16px; background: var(--ground-alt); }
tr.kw-log table { background: var(--ground); }
.kw-log-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 12px; }
.actions .btn[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); }

/* ---------- the API reference ---------- */
.ad { --ad-top: 88px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.ad-nav { position: sticky; inset-block-start: var(--ad-top); max-block-size: calc(100vh - var(--ad-top) - 16px); overflow-y: auto; display: grid; gap: 0; padding-block-end: 24px; scrollbar-width: thin; }
.ad-nav a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.3; }
.ad-nav a:hover { background: var(--band); color: var(--ink); }
.ad-nav .ad-m { min-inline-size: 46px; justify-content: center; }
.ad-nav-h { margin: 16px 0 4px; padding-inline: 8px; font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.ad-nav-h:first-child { margin-block-start: 0; }
.ad-main { display: grid; gap: 48px; min-inline-size: 0; max-inline-size: 1020px; }
.ad-main p { max-inline-size: 75ch; }
.ad-main code, .ad-nav code { font-family: var(--mono); font-size: 0.92em; }
.ad-head { display: grid; gap: 18px; }
.ad-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.ad-facts dt { font: 500 12px/1.6 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.ad-facts dd { margin: 0; }
.ad-sep::before { content: "·"; margin-inline: 6px; color: var(--ink-muted); }
.ad-keybox { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px 16px; padding: 16px; background: var(--ground-alt); align-items: end; }
.ad-keybox label { display: grid; gap: 6px; font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; }
.ad-keybox input { font: 500 14px var(--mono); text-transform: none; letter-spacing: 0; }
.ad-keybox .ad-note { grid-column: 1 / -1; }
.ad-guide, .ad-tag { display: grid; gap: 14px; min-inline-size: 0; }
.ad-tag > h2 { margin-block-end: 4px; }
.ad-op { display: grid; gap: 12px; padding-block: 26px 4px; border-block-start: 1px solid var(--line); min-inline-size: 0; scroll-margin-block-start: var(--ad-top); }
.ad-guide, .ad-tag { scroll-margin-block-start: var(--ad-top); }
.ad-op-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 16px; }
.ad-path { font: 600 15px/1.4 var(--mono); word-break: break-all; }
.ad-path em { font-style: normal; color: var(--red-ink); }
.ad-summary { font-size: 18px; font-weight: 600; }
.ad-meta { font-size: 13px; color: var(--ink-muted); }
.ad-scope { padding: 2px 6px; background: var(--band); color: var(--ink); }
.ad-m { display: inline-flex; align-items: center; padding: 3px 7px; font: 500 12px/1.2 var(--font); letter-spacing: 0; flex: none; }
.ad-get { background: var(--inverse); color: var(--on-inverse); }
.ad-post { background: var(--red); color: var(--on-red); }
.ad-patch { background: var(--warn); color: var(--on-warn); }
.ad-delete { background: var(--critical); color: var(--ground); }
.ad h4 { margin: 10px 0 0; font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; }
.ad-table { overflow-x: auto; max-inline-size: 100%; }
.ad-table td { vertical-align: top; font-size: 14px; }
.ad-table td:first-child { white-space: nowrap; }
.ad-table tr.ad-group th { background: var(--ground-alt); color: var(--ink-muted); }
.ad-req { font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--red-ink); }
.ad-enum { margin-block-start: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.ad-enum code { padding: 1px 5px; background: var(--band); font-size: 12px; }
.ad-ex { color: var(--ink-muted); }
.ad-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ad-cols > div { display: grid; gap: 10px; align-content: start; min-inline-size: 0; }
.ad-code { position: relative; min-inline-size: 0; }
.ad-code pre { margin: 0; padding: 14px 16px; padding-inline-end: 70px; background: var(--inverse); color: var(--on-inverse); font: 13px/1.55 var(--mono); overflow: auto; max-block-size: 420px; }
.ad-copy { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; padding: 5px 9px; border: 0; background: var(--on-inverse); color: var(--inverse); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.ad-copy:hover { background: var(--line-strong); color: var(--ink); }
.ad-code-status { font-family: var(--mono); color: var(--good); }
.ad-note { font-size: 13px; color: var(--ink-muted); }
.ad-try { background: var(--ground-alt); }
.ad-try summary { padding: 10px 14px; font: 500 12px/1.2 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.ad-try summary:hover { background: var(--band); }
.ad-try[open] summary { background: var(--inverse); color: var(--on-inverse); }
.ad-try form { display: grid; gap: 12px; padding: 14px; }
.ad-try label { display: grid; gap: 6px; font: 500 12px/1.3 var(--font); }
.ad-try input, .ad-try textarea { font: 500 13px/1.5 var(--mono); }
.ad-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.ad-try-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ad-send { min-height: 40px; padding: 9px 16px; border: 0; background: var(--red); color: var(--on-red); font: 500 13px/1.1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.ad-send:hover { background: var(--red-deep); }
.ad-status { font-size: 13px; font-weight: 600; }
.ad-out { margin: 0; padding: 14px 16px; background: var(--inverse); color: var(--on-inverse); font: 13px/1.55 var(--mono); overflow: auto; max-block-size: 420px; }
.ad-load { padding: 48px 0; color: var(--ink-muted); }
@media (max-width: 1100px) { .ad-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ad { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ad-nav { position: static; max-block-size: 240px; padding: 8px 0; background: var(--ground-alt); }
  .ad-keybox { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the public page at /api/docs ---------- */
body[data-page="apidocs"] { background: var(--ground); }
.ad-top { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: 18px; min-block-size: 60px; padding-inline: 24px; background: var(--inverse); color: var(--on-inverse); }
.ad-top img { display: block; block-size: 26px; inline-size: auto; }
.ad-top-title { font: 600 13px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--on-header-muted); }
.ad-top-link { margin-inline-start: auto; color: var(--on-header); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; text-decoration: none; padding: 10px 12px; background: var(--header-rule); }
.ad-top-link:hover { color: var(--on-header); background: var(--ink-muted); }
body[data-page="apidocs"] main { padding: 32px 32px 64px; max-inline-size: 1440px; margin-inline: auto; }
body[data-page="apidocs"] .ad { --ad-top: 76px; }
@media (max-width: 720px) {
  .ad-top { padding-inline: 16px; gap: 12px; }
  .ad-top-title { display: none; }
  body[data-page="apidocs"] main { padding: 20px 16px 48px; }
}
/* phones: links and copy buttons big enough to tap */
@media (max-width: 720px) {
  .ad-nav a { min-block-size: 40px; font-size: 15px; }
  .ad-copy { min-block-size: 40px; padding-inline: 12px; }
  .ad-try summary { min-block-size: 40px; }
}