/* The developer centre (/account/developers/, /admin/developers/) and the API reference (/developers/): what account.css and admin.css do not cover. */
.code { margin: var(--matrix-space-12) 0 0; padding: var(--matrix-space-12) var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface-subtle); font-family: var(--matrix-font-mono); font-size: var(--matrix-type-code); line-height: var(--matrix-leading-code); overflow-x: auto; white-space: pre; }
code, .mono { font-family: var(--matrix-font-mono); font-size: var(--matrix-type-code); }
p code, li code, td code, dd code { padding: 1px 5px; border-radius: 4px; background: var(--matrix-surface-subtle); white-space: nowrap; }
.secret-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-12); margin-top: var(--matrix-space-12); }
.secret-box code { flex: 1 1 320px; min-width: 0; padding: var(--matrix-space-12) var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface-subtle); word-break: break-all; white-space: normal; }
.claim { border-color: var(--matrix-brand); }
.scopes { display: grid; gap: var(--matrix-space-8); margin: 0; padding: 0; border: 0; }
.scopes legend, .overlap legend { font-weight: 500; padding: 0; margin-bottom: var(--matrix-space-4); }
.scopes label, .overlap label { display: flex; align-items: flex-start; gap: var(--matrix-space-8); font-weight: 400; }
.scopes label small { display: block; color: var(--matrix-muted); }
.overlap { display: grid; gap: var(--matrix-space-8); margin: var(--matrix-space-12) 0 0; padding: 0; border: 0; }
.options input[type="number"], .options input[type="date"] { padding: 8px 10px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); color: var(--matrix-text); max-width: 240px; }
.panel { margin-top: var(--matrix-space-16); padding: var(--matrix-space-12) var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface-subtle); }
.panel h4 { margin: 0 0 var(--matrix-space-8); }
.panel .options { margin-top: var(--matrix-space-12); }
.expiry-soon { color: var(--matrix-warning); font-weight: 500; }
.state.is-rotating { background: var(--matrix-warning-background); color: var(--matrix-warning); }
.usage-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--matrix-space-12); margin-top: var(--matrix-space-12); align-items: end; }
.usage-filters label { display: grid; gap: 4px; font-weight: 500; font-size: var(--matrix-type-control); }
.usage-filters select, .usage-filters input { min-height: var(--matrix-control-min-height); padding: 8px 10px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); color: var(--matrix-text); font-size: 16px; max-width: 100%; }
.usage-table td.is-error { color: var(--matrix-danger); font-weight: 600; }
.usage-table td.mono, .usage-table td .mono { font-size: var(--matrix-type-caption); }
/* One line per call (Dong, 21 Oct 2026). Both Usage tables (the Keys' and a connection's, class usage-table) get the compact
   rows; the fixed columns, the ellipsis and the phone grid belong to the Keys' table alone (#usage-table), whose seven
   columns they name (the seventh, Tool, from Lucy's D05). The whole value is in the cell's title and in the CSV; the Action column takes what the others leave. */
.usage-table { font-size: var(--matrix-type-caption); }
.usage-table th, .usage-table td { padding: 4px 8px; line-height: 1.35; vertical-align: middle; }
#usage-table { table-layout: fixed; }
#usage-table th, #usage-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#usage-table th:nth-child(1) { width: 150px; }
#usage-table th:nth-child(2) { width: 196px; }
#usage-table th:nth-child(4) { width: 58px; }
#usage-table th:nth-child(5) { width: 300px; }
#usage-table th:nth-child(6), #usage-table td:nth-child(6) { width: 76px; text-align: right; }
#usage-table th:nth-child(7) { width: 150px; } /* the tool a run used (Lucy's D05), last as in the CSV; empty for other calls */
#usage-table td .usage-key-prefix { display: inline; margin-left: 6px; } /* admin.css makes a muted span in a cell a block */
@media (max-width: 960px) { #usage-table th:nth-child(5) { width: 118px; } } /* a narrower window shows the request id's first part; the title and the CSV hold it whole */
@media (max-width: 640px) {
  /* admin.css stacks each call as a grid; here the time, status and bytes share the first line and the Key, Action and
     Request follow with their labels, four lines per call instead of six; a tool run's Tool is one more (Lucy's D05). */
  #usage-table { table-layout: auto; }
  #usage-table th { width: auto; }
  #usage-table tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "when status bytes" "key key key" "action action action" "tool tool tool" "request request request"; gap: 2px 10px; }
  #usage-table td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-align: left; }
  #usage-table td:nth-child(1) { grid-area: when; }
  #usage-table td:nth-child(2) { grid-area: key; }
  #usage-table td:nth-child(3) { grid-area: action; }
  #usage-table td:nth-child(4) { grid-area: status; }
  #usage-table td:nth-child(5) { grid-area: request; }
  #usage-table td:nth-child(6) { grid-area: bytes; width: auto; }
  #usage-table td:nth-child(7) { grid-area: tool; }
  #usage-table td:nth-child(7):empty { display: none; } /* a call that ran no tool keeps its four lines */
  #usage-table td:nth-child(2)::before, #usage-table td:nth-child(3)::before, #usage-table td:nth-child(5)::before, #usage-table td:nth-child(7)::before { content: attr(data-label) ": "; font-weight: 500; }
}
.ref-toc { list-style: none; padding: 0; margin: var(--matrix-space-12) 0 0; display: flex; flex-wrap: wrap; gap: var(--matrix-space-8) var(--matrix-space-16); }
.ref-toc a { text-decoration: none; }
.ref-toc a:hover { text-decoration: underline; }
.ref h2 { margin-top: var(--matrix-space-32); }
.ref h3 { margin-top: var(--matrix-space-24); }
.ref table { width: 100%; border-collapse: collapse; margin-top: var(--matrix-space-12); font-size: var(--matrix-type-control); }
.ref th, .ref td { text-align: left; padding: var(--matrix-space-8); border-bottom: 1px solid var(--matrix-border); vertical-align: top; }
@media (max-width: 640px) {
  .ref table, .ref thead, .ref tbody, .ref tr, .ref th, .ref td { display: block; }
  .ref thead { display: none; }
  .ref tr { padding: var(--matrix-space-8) 0; border-bottom: 1px solid var(--matrix-border); }
  .ref td { border: 0; padding: 2px 0; }
}