/* Free tools (/tools). Loaded after styles.css. */
.tool { max-width: 44rem; }
.tool fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.tool legend, .tool label:not(.check) { display: block; font-weight: 620; margin-bottom: .35rem; padding: 0; }
.tool .field { margin-bottom: 1.1rem; }
.tool input[type="text"], .tool input[type="url"], .tool textarea, .tool input[type="file"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px: stops iOS zooming on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: .65rem .8rem;
  min-height: 2.75rem;
}
.tool textarea { resize: vertical; line-height: 1.5; }
.tool input[aria-invalid="true"] { border-color: #b42318; }
@media (prefers-color-scheme: dark) { .tool input[aria-invalid="true"] { border-color: #f97066; } }
.tool .req, .tool .opt { font-weight: 400; color: var(--text-muted); }
.tool .form-note { margin: .35rem 0 0; }
.field-error { margin: .3rem 0 0; color: #b42318; font-size: .875rem; font-weight: 600; min-height: 0; }
.field-error:empty { display: none; }
@media (prefers-color-scheme: dark) { .field-error { color: #f97066; } }

.checks { display: grid; gap: .25rem .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.check { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 500; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--accent); }
.check.is-off { color: var(--text-muted); cursor: default; }

.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.4rem 0 1.1rem; }
.presets .btn { min-height: 2.75rem; }
.tool .btn { min-height: 2.75rem; }
.tool .btn:disabled { opacity: .5; cursor: not-allowed; }

.file-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.file-list li { margin: 0 0 .35rem; font-size: .9375rem; overflow-wrap: anywhere; }
.link-btn {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: .5rem .25rem;
  min-height: 2.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.tool-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: .85rem;
}
.tool-result.ok { border-left-color: var(--accent-2); }
.tool-result.bad { border-left-color: #b42318; }
@media (prefers-color-scheme: dark) { .tool-result.bad { border-left-color: #f97066; } }
.tool-result h3 { margin: 0 0 .35rem; font-size: 1.0625rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tool-result p { margin: 0 0 .5rem; }
.tool-result ul { margin: .5rem 0 0; }
.tool-result .count.over { font-weight: 650; }
.tool-result .note { color: var(--text-muted); font-size: .875rem; }
.pill { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.pill-ok { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.pill-bad { color: #b42318; border-color: #b42318; }
@media (prefers-color-scheme: dark) { .pill-bad { color: #f97066; border-color: #f97066; } }
.bar { height: .4rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 0 0 .5rem; }
.bar span { display: block; height: 100%; background: var(--accent-2); }
.tool-result.bad .bar span { background: #b42318; }

.warnings { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem .85rem 2rem; font-size: .9375rem; }

.tool-cards { list-style: none; padding: 0; display: grid; gap: .75rem; }
.tool-cards li { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tool-cards span { color: var(--text-muted); font-size: .9375rem; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }