/* ASRT Mail console — platform views: Developer API keys + Webhooks.
   A docs surface, not a dashboard: hairlines, tabular monospace for every machine-read
   value, and one accent. Reuses ui.css tokens and views.css .dev .secret .scope-list .curl;
   only adds prefixed classes the base vocabulary does not cover. No hard-coded colours,
   so data-theme="dark" stays legible without a single override here. */

/* ---------- page scaffolding ---------- */
.apiKeys-root,
.webhooks-root { display: grid; gap: 14px; min-width: 0; }
.apiKeys-root > div,
.webhooks-root > div { display: grid; gap: 14px; min-width: 0; }
.apiKeys-root > div > .page-head,
.webhooks-root > div > .page-head { margin-bottom: 0; }
.apiKeys-root .card + .card,
.webhooks-root .card + .card { margin-top: 0; }
.apiKeys-root table.t td,
.webhooks-root table.t td { vertical-align: top; }

/* right-aligned columns hold button groups and meters, which flex ignores text-align on */
.apiKeys-root td.r .inline,
.webhooks-root td.r .inline { justify-content: flex-end; }
.apiKeys-root td.r .bar,
.webhooks-root td.r .bar { flex: none; }

/* ---------- key table cells ---------- */
.apiKeys-labelCell { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.apiKeys-labelCell b { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }

.apiKeys-quota { display: grid; gap: 5px; min-width: 124px; max-width: 190px; align-content: start; }

/* ---------- picker: scopes and event names ---------- */
.apiKeys-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 7px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.apiKeys-pickerRow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--wash);
  cursor: pointer;
}
.apiKeys-pickerRow:hover { border-color: var(--cyan); background: var(--paper); }
.apiKeys-pickerRow input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--cyan-deep);
}
.apiKeys-pickerRow > div { display: grid; gap: 2px; min-width: 0; }
.apiKeys-pickerRow span { line-height: 1.4; }

/* ---------- log + filter bar ---------- */
.apiKeys-logBar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--line);
}
.apiKeys-logBar .caps { color: var(--muted); }
.apiKeys-logBar select { width: auto; min-width: 168px; max-width: 270px; font-size: 12.5px; }
.apiKeys-spacer { margin-left: auto; }

.apiKeys-when { display: grid; gap: 2px; white-space: nowrap; }
.apiKeys-path { display: inline-block; max-width: 330px; overflow-wrap: anywhere; word-break: break-all; }

.apiKeys-usage { display: grid; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.apiKeys-usage > .caps { color: var(--muted); }

/* ---------- quickstart and docs ---------- */
.apiKeys-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 11px; }
.apiKeys-facts .note { align-items: flex-start; }
.apiKeys-facts .note > div { display: grid; gap: 4px; }

.apiKeys-docsHead { display: grid; gap: 7px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.apiKeys-docsHead .inline { gap: 9px; }
.apiKeys-docsProse { display: grid; gap: 14px; }
.apiKeys-docsExamples { display: grid; gap: 12px; }

.apiKeys-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 7px; }
.apiKeys-legendRow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--wash);
}
.apiKeys-legendRow span { line-height: 1.45; }

/* ---------- dismissible flash line ---------- */
.apiKeys-flash { align-items: flex-start; gap: 12px; }
.apiKeys-flash > div:first-child { display: grid; gap: 3px; }
.apiKeys-flashX {
  margin-left: auto;
  flex: none;
  border: 0;
  background: none;
  color: var(--muted);
  font: 400 16px/1 var(--sans);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.apiKeys-flashX:hover { background: var(--wash-2); color: var(--ink); }

/* ---------- code panels ---------- */
.hook-verb { font: 700 11px/1 var(--mono); color: var(--cyan-deep); letter-spacing: 0.04em; white-space: nowrap; }
.hook-code { display: grid; gap: 7px; min-width: 0; }
.hook-codeHead { display: flex; align-items: center; gap: 10px; }
.hook-codeHead .caps { color: var(--muted); }
.hook-codeHead .btn { margin-left: auto; }
.hook-code pre.code { white-space: pre; overflow-x: auto; }
.hook-codeHint { line-height: 1.5; }

/* ---------- signature verification ---------- */
.hook-signSteps { display: grid; gap: 5px; }
.hook-signLine {
  margin: 0;
  padding: 5px 0 5px 11px;
  border-left: 2px solid var(--line-strong);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate);
}
.hook-signLine:hover { border-left-color: var(--cyan); color: var(--ink); }

/* ---------- show-once secret dialog ---------- */
.hook-secretUse { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--wash); }
.hook-secretUse p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--slate); }

/* ---------- endpoint list ---------- */
.webhooks-endpointCell { display: grid; gap: 2px; min-width: 0; max-width: 340px; }
.webhooks-endpointCell b { font-weight: 600; font-size: 13px; }
.webhooks-last { display: grid; gap: 4px; align-content: start; }

@media (max-width: 860px) {
  .apiKeys-picker,
  .apiKeys-facts,
  .apiKeys-legend { grid-template-columns: minmax(0, 1fr); }
  .apiKeys-path { max-width: 46vw; }
  .webhooks-endpointCell { max-width: 220px; }
  .apiKeys-logBar select { min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .apiKeys-pickerRow,
  .hook-signLine { transition: none; }
}