/* /tools/* - the two free tools (SEO_TOOLS_AND_AUTHORITY_SPEC.md T2, T3).

   Loaded on top of blog.css, which the tool pages inherit through
   blog/base.html. Only what a form needs is here: the chip grids, the two
   answer cards and the error line. Everything else on the page is the blog's
   own type and chrome, on purpose - a tool that looked like a different site
   would read as a different site. */

.tool { max-width: var(--measure); padding-block: var(--sp-6) var(--sp-7); }

/* The tool is the FIRST thing on the page, above any prose: the #1 result for
   the head term is a tool page with 286 words, so the wrapper is short and the
   calculator is not below a lede. */
.tool__form {
  padding: var(--sp-5);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--r-panel);
}
.tool__q { border: 0; margin: 0 0 var(--sp-5); padding: 0; }
.tool__q:last-of-type { margin-bottom: var(--sp-4); }
.tool__q legend {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  padding: 0; margin-bottom: var(--sp-2);
}
.tool__help { margin: 0 0 var(--sp-3); color: var(--color-muted); font-size: var(--text-xs); }

.tool__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
/* A real radio input, visually hidden rather than replaced, so the keyboard,
   the screen reader and a browser with no CSS all still work. */
.tsw { display: block; cursor: pointer; text-align: center; }
.tsw input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}
.tsw__chip {
  display: block; height: 3.2rem;
  background: var(--sw-hex, #ccc);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--r-tile);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.tsw__cap {
  display: block; margin-top: var(--sp-2);
  font-size: var(--text-xs); color: var(--color-muted);
}
.tsw input:checked + .tsw__chip {
  box-shadow: 0 0 0 3px var(--color-accent);
}
.tsw input:focus-visible + .tsw__chip {
  outline: 2px solid var(--color-ink); outline-offset: 3px;
}
.tsw input:checked ~ .tsw__cap { color: var(--color-ink); font-weight: 600; }

.tool__cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.tcard { display: block; cursor: pointer; }
.tcard input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tcard__body {
  display: block; padding: var(--sp-4);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--r-tile);
  background: var(--color-paper);
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.tcard input:checked + .tcard__body { box-shadow: 0 0 0 2px var(--color-accent); }
.tcard input:focus-visible + .tcard__body { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.tcard__label { display: block; font-family: var(--font-display); font-weight: 600; }
.tcard__note { display: block; margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--color-muted); }
.tcard__metal {
  display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: var(--sp-2);
  vertical-align: -0.15rem; border-radius: 50%; background: var(--metal-hex, #ccc);
}

.tool__error {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-paper);
  font-size: var(--text-xs);
}
.tool__privacy { margin: var(--sp-4) 0 0; color: var(--color-muted); font-size: var(--text-xs); }

.tool__result {
  margin-bottom: var(--sp-6); padding: var(--sp-5);
  border: 1px solid var(--color-rule-soft); border-radius: var(--r-panel);
  background: var(--color-paper-2);
}
.tool__metals { list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--text-xs); }
.tool__metals li {
  padding: var(--sp-1, 4px) var(--sp-3);
  border: 1px solid var(--color-rule-soft); border-radius: var(--r-pill);
  color: var(--color-muted);
}