/* Shared styles for the tool pages: JSON to CSV, CSV to JSON, table
   matching, the JSON formatter and validator, and the image tools. */

.tool-lead-api { margin: 1.2rem 0 0; }
.tool-lead-api .api-window { margin: .6rem 0 0; }
.tool-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.tool-badges span {
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--border);
  color: var(--body);
}
.tool-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 1.6rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
  margin: 2rem 0;
}
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tool-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.tool-field label, .tool-legend { font-weight: 600; color: var(--ink); font-size: .92rem; }
.tool-field small { color: var(--muted); font-size: .8rem; }
/* A low version of the drop zone on the upload page, one under each textarea. */
.tool-drop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .15rem .45rem;
  padding: .6rem 1rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--tint);
  color: var(--body);
  font-size: .88rem;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tool-drop:hover, .tool-drop:focus-visible, .tool-drop.is-over {
  background: #eef5ff;
  border-color: var(--blue);
  color: var(--blue-dark);
}
.tool-drop:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tool-drop * { pointer-events: none; }
.tool-drop strong { font-weight: 600; }
.tool-drop.is-bad { border-color: #f87171; }
.tool-drop.is-bad small { color: #b91c1c; }
/* The image pages have no textarea, so the drop zone is the size of the upload page's. */
.tool-drop-large { flex-direction: column; align-items: center; padding: 2.2rem 1.2rem; font-size: 1rem; }
.tool-drop-large strong { font-size: 1.05rem; }
.tool-chosen { display: flex; gap: .9rem; align-items: center; margin: 1rem 0; }
.tool-chosen[hidden] { display: none; }
.tool-chosen img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--tint);
}
.tool-chosen p { margin: 0; }
.tool-card input[type="range"] { width: 12rem; max-width: 100%; accent-color: var(--blue); }
.tool-field[hidden], .tool-check[hidden] { display: none; }
.tool-summary { font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
.tool-image-preview {
  display: block;
  max-width: 100%;
  max-height: 26rem;
  margin-top: .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.tool-card textarea {
  width: 100%;
  min-height: 12rem;
  resize: vertical;
  padding: .75rem .85rem;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-sizing: border-box;
}
.tool-card textarea:focus, .tool-card select:focus, .tool-card input[type="text"]:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  background: #fff;
}
.tool-card select, .tool-card input[type="text"] {
  padding: .5rem .6rem;
  font-size: .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
}
.tool-options { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; margin-bottom: 1rem; }
.tool-options .tool-field { margin-bottom: 0; }
.tool-check { display: flex; gap: .45rem; align-items: center; font-size: .9rem; color: var(--body); }
.tool-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; }
.tool-note { font-size: .82rem; color: var(--muted); margin: .8rem 0 0; }
.tool-result { margin-top: 1.4rem; }
.tool-result:empty { display: none; }
.tool-status { font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
.tool-status.is-good { color: #047857; }
.tool-status.is-bad { color: #b91c1c; }
.tool-meta { color: var(--muted); font-size: .82rem; margin: 0 0 .6rem; }
.tool-link {
  display: block;
  font-family: var(--mono);
  font-size: .82rem;
  word-break: break-all;
  padding: .5rem .65rem;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  user-select: all;
  margin-bottom: .6rem;
}
.tool-preview {
  margin: .8rem 0 0;
  max-height: 24rem;
  overflow: auto;
  padding: .75rem .85rem;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.45;
  white-space: pre;
  background: var(--code-bg, #0f172a);
  color: var(--code-fg, #e2e8f0);
  border-radius: 10px;
}
.tool-error {
  color: #b91c1c;
  font-size: .9rem;
  margin: 0;
  padding: .7rem .85rem;
  background: #fef2f2;
  border-left: 3px solid #f87171;
  border-radius: 4px;
}
.tool-error small { display: block; color: #7f1d1d; margin-top: .25rem; }
.tool-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .6rem; }
.tool-table th, .tool-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tool-table td { font-family: var(--mono); word-break: break-all; }
.tool-counts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .8rem; }
.tool-counts span {
  font-size: .85rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 8px;
  background: var(--tint);
  border: 1px solid var(--border);
}
.tool-noscript { border-left: 4px solid var(--warn-border); background: var(--warn-bg); padding: .9rem 1rem; }
/* The metadata viewer: what an image gives away, most sensitive first. */
.tool-findings { margin: .2rem 0 .8rem; }
.tool-findings ul { margin: .3rem 0 .4rem; padding-left: 1.2rem; }
.tool-findings li { margin: .2rem 0; font-size: .9rem; }
.tool-findings li.is-high strong { color: #b91c1c; }
.tool-findings li.is-medium strong { color: #b45309; }
/* The colour palette: a swatch per colour with its hex and share. */
.tool-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.tool-swatch { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.tool-swatch span { display: block; height: 3.2rem; }
.tool-swatch code { display: block; padding: .35rem .55rem 0; font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.tool-swatch small { display: block; padding: .1rem .55rem .45rem; font-size: .78rem; color: var(--muted); }
.tool-placeholder { width: 8rem; height: auto; vertical-align: middle; margin-left: .4rem; border: 1px solid var(--border); border-radius: 6px; }
.tool-swatches-static { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.tool-swatch-static {
  padding: .45rem .7rem;
  border-radius: 8px;
  color: #fff;
  font-family: var(--mono);
  font-size: .8rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
@media (max-width: 720px) {
  .tool-card { padding: 1rem; }
  .tool-grid { grid-template-columns: 1fr; }
}