/* ============================================================================
   ToolBench — jwt.css
   JWT Decoder only. Loaded via the registry's 'css' key.

   Reuses json.css's .split/.pane/.code/.codebody/.tk-*/.jstat/.verdict/.sep
   directly (both are loaded together) — none of that is redeclared here.
   Tokens come from site.css; .card/.btn/.panel/.chips/.seg/.opts/.err/.field
   come from tools.css.
   ============================================================================ */

/* json.css doesn't define single-line inputs or the verify-result banner —
   both copied from hash.css's shape, since this tool needs the same "enter a
   key, get a pass/fail card" interaction as the HMAC Generator. */
.inp{
  display:block;width:100%;padding:11px 12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  color:var(--ink);
  font:400 16px/1.5 var(--mono);   /* >=16px: stops iOS Safari zooming on focus */
}
.inp:focus{outline:0;border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}
.hfield{margin:0 0 14px}
.keywrap{position:relative}
.keywrap .inp{padding-right:78px}
.keywrap > .btn{position:absolute;right:6px;bottom:6px}

.note{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 18px;padding:10px 12px;border-radius:var(--radius);
  background:rgba(44,110,142,.06);border-left:3px solid var(--blueprint);
  font-size:13.5px;color:var(--slate);
}
.note b{color:var(--ink)}

.vcard{display:flex;align-items:flex-start;gap:14px;margin:14px 0 0;padding:16px;border-radius:var(--radius)}
.vcard.is-ok{background:rgba(76,175,125,.08);border:1px solid rgba(76,175,125,.45);border-left:3px solid var(--success)}
.vcard.is-bad{background:var(--danger-bg);border:1px solid rgba(192,57,43,.35);border-left:3px solid var(--danger)}
.vmark{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font-size:17px}
.vcard.is-ok .vmark{background:var(--success)}
.vcard.is-bad .vmark{background:var(--danger)}
.vbody{min-width:0}
.vbody h3{margin:0 0 4px;font:600 16px/1.3 var(--display)}
.vcard.is-ok h3{color:var(--success-ink)}
.vcard.is-bad h3{color:var(--danger-ink)}
.vbody p{margin:0;font-size:14px;color:var(--slate)}
.vbody code{font:400 13px/1.4 var(--mono);background:rgba(0,0,0,.06);padding:1px 4px;border-radius:2px}

/* ----------------------------------------------------------- step heading -- */
.stephead{display:flex;align-items:center;gap:10px;margin:26px 0 14px}
.stepno{
  flex:none;display:grid;place-items:center;width:24px;height:24px;
  background:var(--ink);color:#fff;border-radius:50%;
  font:600 12px/1 var(--mono);
}
.stephead h2{margin:0;font:600 16px/1.2 var(--display);color:var(--ink)}

/* --------------------------------------------------------------- status --- */
.jwt-status{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  margin:14px 0 0;padding:10px 12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  font:400 12px/1.5 var(--mono);color:var(--slate-light);
}
.jwt-status .verdict{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.jwt-status .ok{color:var(--success-ink)}
.jwt-status .sep{color:var(--paper-line)}

/* ------------------------------------------------------------ header/payload -- */
.jwt-split{margin:18px 0 0}
.jwt-code{max-height:16em}
.jwt-code .codebody{font-size:13px}

/* ----------------------------------------------------------------- claims -- */
.jwt-claims{margin:18px 0 0}
.jwt-claimlist{margin:8px 0 0;display:grid;gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);border-radius:var(--radius);overflow:hidden}
.jwt-claim{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 12px;background:#fff}
@media (min-width:576px){.jwt-claim{grid-template-columns:180px 1fr;align-items:baseline;gap:12px}}
.jwt-claim dt{margin:0;font:500 12px/1.4 var(--sans);color:var(--ink)}
.jwt-claimkey{margin-left:4px;font:400 11px/1.4 var(--mono);color:var(--slate-light)}
.jwt-claim dd{margin:0;font:400 13px/1.5 var(--mono);color:var(--slate);word-break:break-word;overflow-wrap:anywhere}
.jwt-time{color:var(--blueprint);font-size:12px}

.jwt-empty{margin:18px 0 0;text-align:center}

/* ------------------------------------------------- generator (encode side) -- */
/* The two editable JSON panes and the resulting token. Only the pieces the
   decoder did not already need are added here; .split/.pane come from
   json.css, which both JWT pages load. */
.jwt-edit{font-size:13px;white-space:pre;overflow-x:auto}
.jwt-token{word-break:break-all;white-space:pre-wrap}
.inp-narrow{max-width:90px;flex:0 0 auto}