/* API & webhooks screens (Settings, #187). Built to the approved mockups IN1 to IN13 on the Portal's own tokens
   (app.css), with no z-index of its own: overlays come from the shared components and the scale in portal-ui.css. */

.in-mono { font-family: var(--bs-font-monospace); font-size: 12.5px; }

.in-pill {
    display: inline-block; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 9px; margin: 0 4px 3px 0;
    background: #eef3ef; color: var(--cc-green-md); border: 1px solid #d6e3d9;
}

.in-acts { display: inline-flex; gap: 4px; justify-content: flex-end; align-items: center; }

.in-secret { display: flex; gap: 6px; align-items: stretch; }
.in-secret input { font-family: var(--bs-font-monospace); font-size: 13px; }

.in-once { background: #fff8e1; border: 1px solid #f0d98a; border-radius: 10px; padding: 10px 14px; font-size: 13px; }

.in-ev { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.in-ev label { font-size: 13.5px; }
.in-ev small { display: block; color: var(--text-muted); font-size: 11.5px; margin-left: 1.6rem; margin-top: -2px; }

.in-code {
    background: #1c2a1e; color: #e4eee7; border-radius: 10px; padding: 12px 14px; font: 12px/1.55 var(--bs-font-monospace);
    white-space: pre; overflow-x: auto; margin: 0;
}

.in-dl { display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 14px; margin: 0 0 14px; font-size: 13.5px; }
.in-dl dt { font-weight: 600; color: var(--text-secondary); }
.in-dl dd { margin: 0; }

.in-bar { height: 8px; background: #e5e1d6; border-radius: 99px; overflow: hidden; }
.in-bar > i { display: block; height: 100%; background: var(--cc-green-md); }
.in-meter.full .in-bar > i { background: var(--cc-amber); }

/* A phone: the event list is one column, and a key card's two buttons share the row. */
@media (max-width: 767.98px) {
    .in-ev { grid-template-columns: 1fr; }
    .in-dl { grid-template-columns: 1fr; row-gap: 2px; }
    .in-dl dd { margin-bottom: 8px; }
}