/* css/developers.css — the Developers page (developers.html; sassrv-api.md §1.11, §5.1).
   Every class carries the prefix .dev-; shared components (panels, fields, buttons,
   messages, chips, tables) come from css/sas.css. */

/* The texts keep a reading width; the keys' table takes the page's. */
.dev-head,
.dev-docs,
.dev-content > .panel { max-width: 760px; }

.dev-section { margin-top: 30px; }
.dev-content > .dev-section:first-child { margin-top: 20px; }
.dev-page > .dev-messages:not(:empty) { margin-top: 20px; max-width: 760px; }

/* Message hosts take no room while empty. */
.dev-messages:empty { display: none; }
.dev-messages .notice { margin-bottom: 20px; }

/* The request form. */
.dev-form textarea { min-height: 110px; }
.dev-count { white-space: nowrap; }
/* The one-request rule, read before the button. */
.dev-form-note { margin: 20px 0 0; }
.dev-form-note + .form-actions { margin-top: 15px; }

/* What a request said, and ORC's note: as typed, line breaks kept. */
.dev-sent { margin-top: 5px; }
.dev-sent summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dev-sent-list { margin: 10px 0 0; }
.dev-sent-list dt { margin-top: 10px; color: var(--sas-muted); }
.dev-sent-list dt:first-child { margin-top: 0; }
.dev-sent-list dd { margin: 2px 0 0; }

.dev-pre,
.dev-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dev-note {
  padding-left: 10px;
  border-left: 2px solid currentColor;
}

/* The keys. */
.dev-keys-intro { max-width: 760px; }
.dev-keys-bar { margin: 0 0 20px; }
.dev-keys-bar .disabled-reason { margin-top: 6px; }
.dev-table { margin-top: 5px; }
.dev-utc { margin: 8px 0 0; }

.dev-prefix { white-space: nowrap; }
.dev-col-name { overflow-wrap: anywhere; }
.dev-row-revoked > td { color: var(--sas-muted); }

/* The New key form. */
.dev-newkey {
  max-width: 560px;
  margin: 0 0 20px;
  border: var(--orc-rule);
}

.dev-newkey-title {
  margin: 0 0 15px;
  font-size: 20px;
}

/* The new key, shown once. */
.dev-reveal {
  max-width: 760px;
  margin: 0 0 20px;
  padding: 20px;
  border-left: 4px solid var(--sas-ok);
  background: var(--sas-ok-bg);
}

.dev-reveal-title {
  margin: 0 0 10px;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.dev-reveal > p { margin: 0 0 15px; }

.dev-key-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dev-key {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  resize: none;
  field-sizing: content;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  word-break: break-all;
}

.dev-copied { font-weight: 700; }
.dev-copied:empty { display: none; }

@media (max-width: 575.98px) {
  .dev-key-row { flex-direction: column; align-items: stretch; }
}