/* proxy.wiki: tool pages, the /tools/ hub, crawler verifier, WebRTC test,
   cost calculator. Loaded after main.css only where a tool renders
   (inc/tools-ui.php). Every colour is a main.css token, so dark mode follows. */

/* ---------- single tool page: the widget sits above the explainer ---------- */
/* .pw-article already pads the top, so the head adds none of its own. */
.pw-tl-page__head {
  width: var(--pw-wide); margin-inline: auto;
  margin-bottom: var(--pw-6);
}
.pw-tl-page__head .pw-crumbs { margin-bottom: var(--pw-4); }
.pw-tl-page__head h1 { margin: var(--pw-2) 0 0; }
.pw-tl-page__head .pw-lede { margin-top: var(--pw-3); max-width: 46rem; }
.pw-tl-page__tool { width: var(--pw-wide); margin: 0 auto var(--pw-12); }

/* ---------- hub ---------- */
.pw-tl-hubhead { margin-bottom: var(--pw-8); }
.pw-tl-hubhead .pw-crumbs { margin-bottom: var(--pw-3); }
.pw-tl-hubhead h1 { margin: 0; }
.pw-tl-hubhead .pw-lede { margin-top: var(--pw-3); max-width: 46rem; }

.pw-tl-hub {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--pw-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.pw-tl-hub__item { display: flex; }
.pw-tl-card { width: 100%; }
.pw-tl-card__body { display: grid; gap: var(--pw-2); min-width: 0; }
.pw-tl-card__title { font-family: var(--pw-font-sans); font-size: var(--pw-t-md); font-weight: 650; color: var(--pw-ink); }
.pw-tl-card__blurb { color: var(--pw-ink-soft); font-size: var(--pw-t-sm); line-height: 1.55; }
.pw-tl-card__method {
  color: var(--pw-faint); font-size: var(--pw-t-xs); line-height: 1.5;
  padding-top: var(--pw-2); border-top: 1px solid var(--pw-rule);
}
.pw-tl-card:hover .pw-tl-card__title { color: var(--pw-accent); }

.pw-tl-stack { display: grid; gap: var(--pw-8); }
/* Grid items default to min-width:auto, so a wide table inside a tool would
   stretch the track past a phone screen and .pw-tool's overflow:hidden would
   clip the text. Let the item shrink; the table scrolls in its own wrapper. */
.pw-tl-stack > *, .pw-tl-hub__item, .pw-tl-page__tool > * { min-width: 0; }

/* ---------- shared bits ---------- */
.pw-tl-note { margin-top: var(--pw-3); max-width: 72ch; }
.pw-tl-callout--bad { border-left-color: var(--pw-bad); background: var(--pw-bad-soft); }
.pw-tl-verdict { margin-bottom: var(--pw-5); }
.pw-tl-table { font-size: var(--pw-t-sm); }
.pw-tl-table code { font-family: var(--pw-font-mono); font-size: .92em; }
.pw-tl-table a { color: var(--pw-accent); }
.pw-tl-row--warn { background: var(--pw-warn-soft); }
.pw-tl-prov { white-space: nowrap; }
.pw-tl-prov__meta { display: block; color: var(--pw-faint); font-size: var(--pw-t-xs); margin-top: 2px; }
.pw-tl-prov__meta .pw-badge { vertical-align: 1px; }
.pw-tl-min { display: block; color: var(--pw-faint); font-size: var(--pw-t-xs); font-weight: 500; }

/* Sidebar method card on tool pages */
.pw-tl-method__list {
  margin: 0; padding-left: 1.1em; display: grid; gap: var(--pw-2);
  font-family: var(--pw-font-sans); font-size: var(--pw-t-sm); line-height: 1.5; color: var(--pw-ink-soft);
}
.pw-tl-method__more { margin-top: var(--pw-3); font-size: var(--pw-t-sm); }

/* ---------- crawler verifier ---------- */
.pw-tl-crawler__intro, .pw-tl-webrtc__intro, .pw-tl-calc__intro { font-size: var(--pw-t-base); margin: 0; max-width: 72ch; }
.pw-tl-crawler__fields { display: grid; gap: var(--pw-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .pw-tl-crawler__fields { grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr); }
}
.pw-tl-crawler__fields .pw-input.mono { font-family: var(--pw-font-mono); font-size: var(--pw-t-sm); }
.pw-tl-crawler__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-3) var(--pw-4); }
.pw-tl-crawler__actions small { font-size: var(--pw-t-xs); }

.pw-tl-evidence .pw-dl__v a { color: var(--pw-accent); }
.pw-tl-evidence .pw-dl__v .muted { font-family: var(--pw-font-sans); font-weight: 500; }

.pw-tl-cmd { position: relative; margin-top: var(--pw-3); }
.pw-tl-cmd pre {
  margin: 0; padding: var(--pw-4) 5.5rem var(--pw-4) var(--pw-4);
  background: var(--pw-surface); border: 1px solid var(--pw-rule); border-radius: var(--pw-radius);
  font-family: var(--pw-font-mono); font-size: var(--pw-t-sm); line-height: 1.6;
  overflow-x: auto; white-space: pre;
}
.pw-tl-cmd .pw-copy { position: absolute; top: var(--pw-3); right: var(--pw-3); }

.pw-tl-crawler__ref { border-top: 1px solid var(--pw-rule); padding: var(--pw-4) var(--pw-6) var(--pw-6); }
.pw-tl-crawler__ref > summary {
  cursor: pointer; font-weight: 650; font-size: var(--pw-t-sm); color: var(--pw-ink-soft);
  padding: var(--pw-2) 0;
}
.pw-tl-crawler__ref > summary:hover { color: var(--pw-accent); }
.pw-tl-crawler__ref[open] > summary { margin-bottom: var(--pw-3); }

/* ---------- calculator ---------- */
.pw-tl-calc__records { border-top: 1px solid var(--pw-rule); padding: var(--pw-6); }
.pw-tl-calc__records .pw-tool__h3 { margin-top: 0; }

@media (max-width: 560px) {
  .pw-tl-crawler__ref, .pw-tl-calc__records { padding-inline: var(--pw-4); }
  .pw-tl-cmd pre { padding-right: var(--pw-4); padding-top: 3rem; }
  .pw-tl-prov { white-space: normal; }
}