/* Bearer Tokens: its own parts, loaded after websec.css. */

:root { --api: #6a4fc9; }
@media (prefers-color-scheme: dark) { :root { --api: #b39dff; } }

/* The two services hold many settings. They keep a fixed height, so the
   explanation under the stage stays in view, and scroll under their heading
   and their reply button, which stay put. */
.ws-server, .ws-api { display: flex; flex-direction: column; max-height: 30rem; }
.srv-body { overflow-y: auto; min-height: 0; margin: 0 -0.4rem; padding: 0 0.4rem; }
@media (max-width: 860px) { .ws-server, .ws-api { max-height: none; } }
.ws-api { --c: var(--api); border-top: 4px solid var(--c); }
.ws-msg.api .dir span:last-child, .ws-msg.to-left.api .dir .arrow { color: var(--api); }
.to-left.api .ws-raw { border-left-color: var(--api); }
.ws-seq .msg.ap { stroke: var(--api); }
.ws-seq .ah.ap { fill: var(--api); }

/* The terminal: the last command and its output, then the next command. */
.term .hist { color: #8b98a5; overflow-wrap: anywhere; }
.term .out { max-height: 12rem; overflow-y: auto; font-size: 0.74rem; line-height: 1.45; margin-bottom: 0.3rem; }
.term .cmd { overflow-wrap: anywhere; }
.term select { width: auto !important; max-width: 100%; }
.tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tools .ws-btn { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* A token in its three colours: header, payload, signature. */
.jwt { font-size: 0.76rem; overflow-wrap: anywhere; }
.jh { color: var(--bad); }
.jp { color: var(--secret); }
.js { color: var(--accent); }
.vars { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.vars th { text-align: left; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; padding: 0.15rem 0.4rem 0.15rem 0; vertical-align: top; white-space: nowrap; }
.vars td { padding: 0.15rem 0; border-bottom: 1px dashed var(--border); }
.vars td .dim { font-size: 0.74rem; }
.vars b.bad { color: var(--bad); }

/* The keys a service holds: ● private, ◯ public. */
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.8rem; }
.keys .kg { color: var(--secret); font-weight: 700; }
.small { font-size: 0.76rem; margin: 0.3rem 0 0; }
.users td code { font-size: 0.78rem; }

/* Four columns leave the services' cards narrow: each check's result goes
   under its name. */
.ws-server .trace li, .ws-api .trace li { grid-template-columns: 1.2rem minmax(0, 1fr); }
.ws-server .trace li code, .ws-api .trace li code { grid-column: 2; }