/* Lobby Watch: the API page (#/api/reference, #/api/keys) — the reference, and the key management moved here from
   Admin (6.16). Layout only: widths, grids, gaps and phone reflow. The create row itself is the shared .ops-new from
   views/admin.css. */

.v-api .api-ph {
  column-gap: 24px;
}
.v-api .api-ph .tabs {
  align-self: stretch;
}

/* ---- Reference ----------------------------------------------------------------------------------------------- */

/* Prose is held to a readable measure; the code blocks and the scope grid keep the full width. */
.api-lede,
.api-p,
.ep-w {
  max-width: 78ch;
}
.api-lede {
  margin-bottom: 24px;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--text-2);
}
.api-p {
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}
/* A 12/16 aside under a block: what the example is, or the caveat after it. */
.api-note {
  margin-top: 8px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
/* The line naming an example above it. */
.api-lbl {
  margin-bottom: 4px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

/* A copyable example: the command on --sunken with the Copy button beside it, like the shown-once key. It wraps
   rather than scrolling sideways, so a long curl line is readable on a phone without a second scroll direction. */
.api-code {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
.api-code-t {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  background: var(--sunken);
  font-family: var(--mono);
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.api-code .tbtn {
  flex: 0 0 auto;
}

/* Endpoints: one block each, separated by the same hairline the tables use. */
.eps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ep + .ep {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.ep-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
}
.ep-m {
  font-family: var(--mono);
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  font-weight: 500;
  color: var(--text-3);
}
.ep-p {
  font-family: var(--mono);
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* The scopes sit at the end of the header line while they fit and take their own line when they don't, so a long
   requirement (/chat) wraps left-aligned instead of squeezing the path. */
.ep-s {
  flex: 0 1 auto;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
.ep-w {
  margin-top: 4px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}
.ep .dl {
  margin-top: 8px;
}

/* Parameter names and status codes are literals, not labels, so the dt is Mono (6.13 sets the rest). */
.dl--mono dt {
  font-family: var(--mono);
  color: var(--text-2);
}

/* The two versions of the same chat row, side by side while there is room. */
.api-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px 32px;
  margin-top: 16px;
}
.api-two-c {
  min-width: 0;
}

/* A scope in the catalogue: the same id/description pair as the checkbox rows (6.15), without the box. */
.api-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  padding: 4px 0;
}

/* ---- Keys ---------------------------------------------------------------------------------------------------- */

/* Keys (6.16). Revoked keys are listed struck through rather than filtered away, so nothing sits between the create
   row's rule and the table: the shared .ops-new spacing is the whole rhythm, as on the users table. */
.keys-once > p:first-child {
  font-weight: 500;
}
.keys-once .help {
  margin-top: 8px;
}
.keys-shown {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
.keys-shown .keyval {
  flex: 1 1 auto;
  min-width: 0;
}
.keys-once .btns {
  margin-top: 12px;
}
.keys-hint {
  margin-top: 0;
}

/* Scope groups: side by side while there is room, each one a heading (with an All/None toggle on the key editor)
   over the 6.15 rows. Below two columns' worth they stack, so phones need no rule. */
.scopes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px 32px;
  padding-top: 4px;
}
.scope-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.scope-gl {
  font-weight: 600;
}
.scope-h .tbtn {
  margin-left: auto;
  min-height: 0;
  padding: 0;
}

/* The label cell is the row's own name (.c-key is the primary cell, not the "Key" column): striking it through says
   "this key is dead" without hiding what it was for. */
.v-api .tbl-keys tr.is-revoked > td.c-key {
  text-decoration: line-through;
}

/* ---- Phones ---------------------------------------------------------------------------------------------------- */

@media (max-width: 719.98px) {
  .v-api .api-ph .tabs {
    flex: 1 1 100%;
  }
  /* The Copy button drops under its block rather than stealing width from the command. */
  .api-code {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .api-code-t {
    flex: 1 1 100%;
  }
}