/* JWT decoder: the few things tools.css doesn't cover. The key box under the
   token, the token shown with each part in its own colour (each part is also
   named in the legend and for screen readers, so colour is never the only
   signal), and the claims table's name column. */

.jwt-input { min-height: 112px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.key-input { min-height: 84px; font-size: 13px; line-height: 1.45; }

.key-box { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / .18); min-width: 0; }
.key-group { gap: 12px; }
.key-group > legend { font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }

/* The token, coloured by part */
.jwt-token {
  margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgb(0 0 0 / .35);
  font-size: var(--mono-size); line-height: 1.6; overflow-wrap: anywhere; word-break: break-all;
}
.p-header { color: #ff9eb1; }
.p-payload { color: #c8a8ff; }
.p-sig { color: #6fd8f2; }
.p-key { color: #ffc98a; }
.p-iv { color: #9fe8a8; }
.p-dot { color: var(--ink); font-weight: 700; }
.jwt-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.jwt-legend li { display: inline-flex; align-items: center; gap: 7px; }
.jwt-legend .swatch { width: 10px; height: 10px; border-radius: 3px; background: currentColor; }

/* Header parameters and claims: name on the left, value and meaning on the right */
.param-list { grid-template-columns: minmax(96px, 28%) minmax(0, 1fr); gap: 12px 18px; }
.param-list dt { color: var(--ink); overflow-wrap: anywhere; }
.param-list dd .muted.small { margin-top: 3px; }
@media (max-width: 520px) {
  .param-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .param-list dd { margin-bottom: 6px; }
  .param-list dt { padding-top: 10px; border-top: 1px solid var(--line); }
  .param-list dt:first-child { padding-top: 0; border-top: 0; }
}
.claim-name { display: grid; gap: 2px; min-width: 0; }
.claim-problem { margin-top: 4px; color: var(--fail); }
.stack-tight { display: grid; gap: 2px; }
.muted.small, .small { font-size: 13px; line-height: 1.5; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }