Add ats-tool

public/theme.css

@@ -719,3 +719,94 @@ progress::-webkit-progress-value {
   border-radius: 2px;
 }
 */
+
+/* File input. Adapted from the commented block above, which referenced a
+   --bg-color token that does not exist; the real one is --color-bg. */
+input[type="file"] {
+  background-color: var(--color-bg);
+  border: 2px dashed var(--color-mg);
+  color: var(--color-fg);
+  cursor: pointer;
+  padding: var(--gutter-small);
+  width: 100%;
+}
+
+input[type="file"]:hover,
+input[type="file"]:focus-visible {
+  border-color: var(--color-accent);
+}
+
+input[type="file"]::file-selector-button {
+  background-color: var(--color-accent);
+  border: none;
+  color: var(--color-bg);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  margin-inline-end: 1ch;
+  padding: 0.25em 1em;
+}
+
+/* Cards on /tools. .tool-card was referenced by the placeholder markup but
+   never had any styles defined. */
+.tool-card {
+  border: 1px solid var(--color-mg);
+  display: block;
+  padding: var(--gutter-small);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 120ms ease;
+}
+
+.tool-card:hover,
+.tool-card:focus-visible {
+  border-color: var(--color-accent);
+}
+
+.tool-card h3 {
+  color: var(--color-accent);
+}
+
+.tool-card h3::before {
+  content: "./";
+  color: var(--color-mg);
+}
+
+.tool-card .tool-summary {
+  color: var(--color-fg);
+}
+
+.tool-card .tool-description {
+  color: var(--color-mg);
+  font-size: var(--pt-small-pica);
+}
+
+:root[data-reduce-motion="on"] .tool-card {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-reduce-motion="off"]) .tool-card {
+    transition: none;
+  }
+}
+
+:root[data-more-contrast="on"] .tool-card,
+:root[data-more-contrast="on"] input[type="file"] {
+  border-color: var(--color-fg);
+}
+
+:root[data-more-contrast="on"] .tool-card .tool-description {
+  color: var(--color-fg);
+}
+
+@media (prefers-contrast: more) {
+  :root:not([data-more-contrast="off"]) .tool-card,
+  :root:not([data-more-contrast="off"]) input[type="file"] {
+    border-color: var(--color-fg);
+  }
+
+  :root:not([data-more-contrast="off"]) .tool-card .tool-description {
+    color: var(--color-fg);
+  }
+}