/* The tool page. One page: what snag is, how to get it, and what it scored.
   It loads the catalogue's styles.css for the tokens and the top bar; everything
   below is this page's own. The prose half arrived from snagging.css when the
   two pages were merged — a second page about a sixteen-file tool could not be
   kept in step with the first, and it had already drifted twice. */

.tool-main{max-width:760px;margin:0 auto;padding:0 24px 120px}
.tool-head{padding:58px 0 40px;border-bottom:1px solid var(--line)}
.tool-kicker{font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-quiet)}
.tool-head h1{font-size:clamp(38px,8vw,62px);letter-spacing:-.035em;line-height:1;margin:16px 0 0;font-weight:600}
.tool-stand{margin:20px 0 0;font-size:19px;line-height:1.55;color:#454c58;max-width:34rem}

.tool-section{padding:42px 0 0}
.tool-section + .tool-section{border-top:1px solid var(--line);margin-top:42px}
.tool-section h2{font-size:23px;letter-spacing:-.022em;line-height:1.2;font-weight:600}
.tool-section h3{margin-top:28px;font-size:15px;font-weight:650;letter-spacing:-.005em}
.tool-section p{margin:15px 0 0;font-size:15px;line-height:1.72;color:#4d545f;max-width:36rem}
.tool-section p b{color:var(--ink);font-variant-numeric:tabular-nums}
.tool-section a{color:#41485a;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ccd3}
.tool-section a:hover{color:var(--ink);text-decoration-color:var(--accent)}

pre{margin:18px 0 0;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;
  overflow-x:auto;font-size:13px;line-height:1.7;color:#3d4450;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
p > code{background:#eceef2;border-radius:4px;padding:1px 5px}

.tool-table{width:100%;margin-top:20px;border-collapse:collapse;font-size:14px;text-align:left}
.tool-table th,.tool-table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.6;color:#4d545f}
.tool-table th{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);border-bottom-color:var(--ink);padding-bottom:8px}
.tool-table td:first-child{color:var(--ink);white-space:nowrap;padding-right:20px}
.tool-table td b{font-variant-numeric:tabular-nums}
.tool-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Each segment's flex is its own count, so the bar cannot disagree with the
   table beside it. */
.tier-bar{display:flex;gap:3px;height:13px;margin-top:22px}
.tier-bar i{border-radius:3px}
.tier-bar i:nth-child(1){background:#2f3540}
.tier-bar i:nth-child(2){background:#5d6673}
.tier-bar i:nth-child(3){background:#8a919c}
.tier-bar i:nth-child(4){background:#c2c7cf}

.tool-foot{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--meta);max-width:36rem}
.tool-foot a{color:#4d545f;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#d6d9df}
@media (max-width:560px){
  .tool-head{padding-top:36px}
  .tool-section{padding-top:30px}
  .tool-section + .tool-section{margin-top:30px}
  .tool-table td:first-child{white-space:normal}
  pre{font-size:12px}
}

.route-grid{display:grid;gap:14px;margin-top:22px}
.route{border:1px solid var(--line);border-radius:12px;background:#fff;padding:17px 18px 19px;
  display:flex;flex-direction:column}
.route-tag{font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.route h3{margin:7px 0 0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.route p{margin:9px 0 0;font-size:14px;line-height:1.62;color:#525a66;max-width:none}
.route pre{margin-top:13px;background:#fbfbfc;white-space:pre-wrap;overflow-wrap:break-word}
.route-note{margin-top:auto;padding-top:13px;font-size:12.5px;line-height:1.55;color:var(--meta)}
.route.primary{border-color:#cfd3da;box-shadow:0 1px 0 #eceef1,0 10px 26px -18px #2a2f3a}
.route.primary .route-tag{color:var(--accent-quiet)}

.tool-section a.get{display:inline-flex;align-items:center;gap:9px;text-decoration:none;margin-top:14px;padding:0 17px;min-height:46px;
  border:1px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:550;text-decoration:none;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.tool-section a.get:hover{background:#000;border-color:#000;text-decoration:none}
.get .name{white-space:nowrap}
.get .size{font-size:12px;font-weight:400;color:#c6c8cc;font-variant-numeric:tabular-nums}
.get-meta{margin-top:10px;font-size:12.5px;color:var(--meta);font-variant-numeric:tabular-nums}

.needs{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.needs li{list-style:none;border:1px solid var(--line);border-radius:99px;background:#fff;
  padding:6px 13px;font-size:12.5px;color:#525a66}
.needs b{color:var(--ink);font-weight:600}

.warn{margin-top:20px;border-left:3px solid var(--accent);background:#fff8f5;
  border-radius:0 9px 9px 0;padding:14px 16px}
.warn p{margin:0;font-size:14px;line-height:1.66;color:#4d545f;max-width:none}
.warn p + p{margin-top:9px}
.warn code{background:#f2ddd4;border-radius:4px;padding:1px 5px}

@media (max-width:560px){
  .route{padding:15px 15px 17px}
  .get{width:100%;justify-content:center}
}