/* JWT Decoder — a bar (Sample, Paste, Clear), the token card with its status
   caption, then an empty state or the results: header and payload cards side
   by side and the claims card with its expiry row (layout from
   styles/components/form.css). The token field is
   styles/components/editor.css and decoded blocks use text-output.css;
   only the claim typography and expiry tint are the page's own. */

textarea.jwt-input {
  min-height: 22vh;
}

/* Neutral ("Waiting for a token…") is redundant with the empty card — only
   surface the status line once there is real feedback. */
.jwt-status { font-family: var(--mono); }
.jwt-status[data-kind="neutral"] { display: none; }

/* Claims — one card: an optional tinted expiry row, then key / value rows. */
.jwt-claims:empty { display: none; }

.jwt-expiry {
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 600;
}
.jwt-expiry svg { flex-shrink: 0; }
.jwt-expiry__rel { color: var(--text-muted); font-weight: 500; }
.jwt-expiry.is-valid   { color: var(--success); background: var(--success-soft); }
.jwt-expiry.is-expired { color: var(--danger);  background: var(--danger-soft); }

.jwt-claim__key code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-quaternary);
}
.jwt-claim__val { font-size: 12.5px; color: var(--text); }