/* Styles for the tools under /tools/. Only the tools pages load this file, so nothing here may style the rest of the site. */
:root{--diff-add:#15803D;--diff-del:#B91C1C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--diff-add:#4ADE80;--diff-del:#F87171}}
:root[data-theme="dark"]{--diff-add:#4ADE80;--diff-del:#F87171}
.tools-privacy{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--muted)}
.tools-proof{margin:28px 0 0;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tools-proof summary{cursor:pointer;font-weight:600}
.tools-proof ol{margin:12px 0 0;padding-left:1.3em;line-height:1.6;color:var(--muted)}
.tools-proof code,.tools-status code{font-family:var(--mono);font-size:.92em}
.tools-panes{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:701px){.tools-panes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tools-pane{display:grid;gap:10px;align-content:start;padding:2px;border-radius:12px}
.tools-pane.dragover{outline:2px dashed var(--accent);outline-offset:2px}
.tools-pane-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tools-pane-head label{font-weight:600}
.tools-count{font:400 13px/1 var(--mono);color:var(--muted)}
.tools-pane textarea,textarea.tools-input{box-sizing:border-box;width:100%;min-height:14rem;resize:vertical;padding:12px 14px;
  border:1px solid var(--hair);border-radius:10px;background:var(--paper);color:var(--text);
  font:400 13.5px/1.55 var(--mono);tab-size:2}
.tools-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tools-bar [hidden],.tools-pane [hidden]{display:none}
.tools-status{min-height:1.4em;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.tools-status[data-kind="error"]{color:var(--err)}
.tools-status[data-kind="working"]{color:var(--accent-ink)}
/* Not hidden while empty, so it stays a live region once status() marks it; it only gives up its reserved line. */
#jwt-clean-note:empty{min-height:0}
.tools-options{display:flex;flex-wrap:wrap;gap:12px 24px;margin:16px 0;font-size:14.5px}
.tools-options label{display:inline-flex;align-items:center;gap:8px}
.tools-options select,.tools-options input[type="text"]{padding:6px 10px;border:1px solid var(--hair);border-radius:8px;
  background:var(--paper);color:var(--text);font:inherit}
.tools-summary{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0;font-size:14.5px;font-weight:600}
.tools-diff{margin:16px 0;border:1px solid var(--line);border-radius:10px;overflow-x:auto;background:var(--paper);
  font:400 13px/1.5 var(--mono)}
.tools-diff-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:640px}
.tools-side{display:grid;grid-template-columns:2ch 5ch minmax(0,1fr);gap:0 6px;padding:0 8px}
.tools-side + .tools-side{border-left:1px solid var(--line)}
.tools-marker{font-weight:700;text-align:center}
.tools-lineno{text-align:right;color:var(--muted);user-select:none}
.tools-text{white-space:pre-wrap;overflow-wrap:anywhere}
.tools-side.added{background:color-mix(in srgb,var(--diff-add) 16%,var(--paper))}
.tools-side.removed{background:color-mix(in srgb,var(--diff-del) 16%,var(--paper))}
.tools-side.changed{background:color-mix(in srgb,var(--accent-soft) 70%,var(--paper))}
.tools-word-added{background:color-mix(in srgb,var(--diff-add) 38%,var(--paper))}
.tools-word-removed{background:color-mix(in srgb,var(--diff-del) 38%,var(--paper))}
.tools-changes{list-style:none;margin:16px 0;padding:0;display:grid;gap:6px}
.tools-changes li{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:14px;line-height:1.5}
.tools-changes code{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.tools-tree,.tools-tree ul{list-style:none;margin:0;padding:0}
.tools-tree ul{margin-left:1.2em;padding-left:.8em;border-left:1px solid var(--line)}
.tools-tree li{padding:4px 0}
.tools-bar-fill{display:block;width:var(--w,0%);height:6px;margin-top:4px;border-radius:3px;background:var(--accent)}
.alt-btn{padding:9px 18px;border:1px solid var(--hair);border-radius:999px;background:transparent;
  color:var(--text);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.alt-btn:hover{border-color:var(--accent)}
.tools-fieldset{min-width:0;margin:16px 0 0;padding:0;border:0}
.tools-fieldset legend{padding:0;font-weight:600;font-size:14.5px}
.tools-fieldset .tools-options{margin:8px 0 0}
.tools-options input:disabled{opacity:.55}
.tools-views{display:flex;gap:10px;margin:8px 0 12px}
.alt-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.tools-notes{margin:0;display:grid;gap:4px}
.tools-notes:empty{display:none}
.tools-changes li:focus-visible,.tools-diff-row:focus-visible,.tools-diff:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tools-changes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tools-changes .tools-marker{flex:none;width:1.4ch}
.tools-path,.tools-line{padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.tools-line{font-size:13px}
.tools-expand{display:block;width:100%;border-radius:0;border-width:1px 0;font-size:13px;padding:6px 12px}
.tools-diff-row:focus-visible{outline-offset:-2px}
.tools-formatted{margin:0;max-height:32rem;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);font:400 13px/1.5 var(--mono);white-space:pre}
.tools-count-note{margin:8px 0}
.tools-options label,.tools-pane-head label{font:inherit;letter-spacing:0;text-transform:none;color:var(--text)}
.tools-pane-head label{font-weight:600;font-size:15px}
.tools-options input[type="checkbox"]{width:auto;margin:0}
.tools-side.added .tools-marker{color:var(--diff-add)}
.tools-side.removed .tools-marker{color:var(--diff-del)}
.tools-options label{white-space:nowrap}
/* A page can hold 20,000 rows; skipping the layout of the ones off screen keeps each frame short while they are added. */
.tools-diff-row{content-visibility:auto;contain-intrinsic-size:auto 20px}
.tools-changes li{content-visibility:auto;contain-intrinsic-size:auto 42px}
.tools-changes li:focus-visible{outline-offset:-2px}
.tools-diff-seg.tools-change:focus-visible,.tools-unified .tools-change:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tools-unified{margin:16px 0;border:1px solid var(--line);border-radius:10px;overflow-x:auto;background:var(--paper);font:13px/1.55 var(--mono)}
.tools-unified-row{display:grid;grid-template-columns:2ch minmax(0,1fr);gap:0 8px;padding:0 8px;min-width:min-content}
.tools-unified-row span + span{white-space:pre-wrap;overflow-wrap:anywhere}
.tools-unified-row.added{background:color-mix(in srgb,var(--diff-add) 16%,var(--paper))}
.tools-unified-row.removed{background:color-mix(in srgb,var(--diff-del) 16%,var(--paper))}
.tools-unified-row.hunk{color:var(--muted);background:color-mix(in srgb,var(--accent-soft) 50%,var(--paper))}
.tools-unified-row.added .tools-marker{color:var(--diff-add)}
.tools-unified-row.removed .tools-marker{color:var(--diff-del)}
.tools-code{position:relative;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.tools-code pre{margin:0 0 10px;overflow-x:auto;font:400 13px/1.55 var(--mono);white-space:pre}
.tools-code .alt-btn{padding:6px 14px;font-size:13.5px}
.tools-warn{margin:20px 0 0;padding:14px 18px;border:1px solid var(--note-line);border-radius:12px;background:var(--note-soft)}
.tools-warn > p{margin:0;font-size:15px;line-height:1.6}
.tools-warn .tools-code{margin-bottom:0}
.tools-results{margin-top:8px}
.tools-explain{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:901px){.tools-explain{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .tools-detail{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}}
.tools-tree-wrap{overflow-x:auto}
.tools-tree ul{margin-left:.6em;padding-left:.7em}
@media (max-width:700px){.tools-tree ul{margin-left:.2em;padding-left:.45em}}
.tools-node{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;box-sizing:border-box;padding:6px 10px;
  border:1px solid transparent;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.tools-node:hover{border-color:var(--hair)}
.tools-node[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.tools-node-label{flex:1 1 100%;min-width:0;font:500 13.5px/1.45 var(--mono);overflow-wrap:anywhere}
.tools-meter{flex:1 1 6rem;min-width:4rem;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.tools-meter .tools-bar-fill{height:100%;margin:0;border-radius:0}
.tools-node-ms,.tools-node-rows{font:400 13px/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.tools-node-ms{min-width:7ch;color:var(--text)}
.tools-badge{padding:0 8px;border:1px solid var(--hair);border-radius:999px;font:500 12px/1.7 var(--mono);color:var(--muted);white-space:nowrap}
.tools-badge-warn{border-color:var(--note-line);background:var(--note-soft);color:var(--note)}
.tools-detail{box-sizing:border-box;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tools-detail-title{margin:0 0 10px;font:600 14px/1.5 var(--mono);overflow-wrap:anywhere}
.tools-detail h4{margin:16px 0 6px;font-size:14px;font-weight:600}
.tools-facts{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 14px;margin:0 0 4px;font-size:14px;line-height:1.5}
.tools-facts dt{color:var(--muted)}
.tools-facts dd{margin:0;font-family:var(--mono);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.tools-table-wrap{margin:8px 0;overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.tools-table{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--mono)}
.tools-table caption{padding:6px 10px;text-align:left;font:600 13px/1.4 var(--sans);color:var(--muted)}
.tools-table th,.tools-table td{padding:4px 10px;border-top:1px solid var(--line);text-align:left;white-space:nowrap}
.tools-table thead th{color:var(--muted);font-weight:500}
.tools-findings{margin:12px 0;padding-left:1.4em;display:grid;gap:12px}
.tools-finding h3{margin:0 0 4px;font-size:16px}
.tools-finding p{margin:0 0 6px;font-size:15px;line-height:1.55}
.tools-more{margin:12px 0}
.tools-more summary{cursor:pointer;font-weight:600}
.tools-checklist{margin:8px 0;padding-left:1.3em;display:grid;gap:6px;line-height:1.55}
.tools-panel h3{font-size:16px}
.tools-panel[hidden],.tools-results[hidden]{display:none}
.tools-views{flex-wrap:wrap}
.tools-jwt-part h3{margin:20px 0 8px;font-size:16px}
.tools-claims .tools-table th,.tools-claims .tools-table td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.tools-sig{margin:0;font:400 13px/1.55 var(--mono);overflow-wrap:anywhere}
.tools-key{min-height:6rem}
.tools-verify .tools-options{align-items:center}
.tools-verify input[type="password"],.tools-verify input[type="text"]{min-width:14rem;max-width:100%;box-sizing:border-box;padding:6px 10px;border:1px solid var(--hair);border-radius:8px;background:var(--paper);color:var(--text);font:400 14px var(--mono)}
.tools-verify .tools-options label{white-space:normal;flex-wrap:wrap}
@media (max-width:700px){
  .tools-claims .tools-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tools-claims .tools-table,.tools-claims .tools-table tbody,.tools-claims .tools-table tr,.tools-claims .tools-table td{display:block}
  .tools-claims .tools-table tr{padding:6px 0;border-top:1px solid var(--line)}
  .tools-claims .tools-table tr:first-child{border-top:0}
  .tools-claims .tools-table td{padding:2px 10px;border:0}
  .tools-claims .tools-table td:first-child{font-weight:500;color:var(--muted)}
}