/* WPURLs Tools — structural styles only; colors/typography come from the
   active theme's tokens (falls back to sane inherits elsewhere). */
.tool-box {
  max-width: none;
  padding: var(--space-6, 2rem);
  background: var(--color-surface-2, rgba(128,128,128,0.06));
  border: 1px solid var(--color-border, rgba(128,128,128,0.25));
  border-radius: var(--radius-lg, 14px);
}
.tool-box .button { min-height: 44px; font-weight: 650; }
.tool-copy {
  background: var(--color-surface, transparent);
  color: var(--color-text, inherit);
  border: 1px solid var(--color-border-strong, rgba(128,128,128,0.35));
}
.tool-copy:hover { background: var(--hover-veil, rgba(128,128,128,0.07)); color: var(--color-text, inherit); border-color: var(--border-hover, rgba(128,128,128,0.45)); }
.tool-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3, 0.75rem); }
.tool-input-row input { min-width: 0; min-height: 44px; }
.tool-status { min-height: 1.5em; margin-top: var(--space-3, 0.75rem); color: var(--color-text-2, inherit); font-size: var(--fs-sm, 0.875rem); }
.tool-result { margin-top: var(--space-5, 1.5rem); padding-top: var(--space-5, 1.5rem); border-top: 1px solid var(--hairline, rgba(128,128,128,0.15)); }
.tool-verdict { font-size: var(--fs-lg, 1.375rem); font-weight: 750; line-height: var(--lh-tight, 1.15); color: var(--color-text, inherit); }
.tool-h {
  font-family: var(--font-serif, inherit);
  font-size: var(--fs-md, 1.0625rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: var(--space-5, 1.5rem) 0 var(--space-2, 0.5rem);
}
.tool-plugins { display: grid; gap: var(--space-1, 0.25rem); }
.tool-plugins li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 0.75rem);
  padding-block: var(--space-1, 0.25rem);
  border-bottom: 1px solid var(--hairline-row, rgba(128,128,128,0.15));
  font-size: var(--fs-sm, 0.875rem);
}
.tool-plugins li:last-child { border-bottom: 0; }
.tool-quiet { color: var(--color-faint, inherit); font-size: var(--fs-sm, 0.875rem); margin-top: var(--space-3, 0.75rem); }
/* Shared output/option pieces for the client-side tools. */
.tool-output-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3, 0.75rem); align-items: stretch; }
.tool-output {
  display: block;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--color-input-bg, rgba(128,128,128,0.08));
  border: 1px solid var(--color-border, rgba(128,128,128,0.25));
  border-radius: var(--radius-md, 9px);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-base, 1rem);
  overflow-wrap: anywhere;
  user-select: all;
}
.tool-strength { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); align-items: center; gap: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); }
.tool-strength-bar {
  height: 4px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-border, rgba(128,128,128,0.25));
  overflow: hidden;
}
.tool-strength-bar span { display: block; height: 100%; width: 0; background: var(--color-success, #2f855a); transition: width 120ms ease; }
.tool-strength-bar span[data-grade='ok'] { background: var(--color-warn, #b7791f); }
.tool-strength-bar span[data-grade='weak'] { background: var(--color-error, #c53030); }
.tool-options { margin-top: var(--space-5, 1.5rem); padding-top: var(--space-5, 1.5rem); border-top: 1px solid var(--hairline, rgba(128,128,128,0.15)); }
.tool-checks { display: flex; flex-wrap: wrap; gap: var(--space-3, 0.75rem) var(--space-5, 1.5rem); margin-block: var(--space-3, 0.75rem); }
.tool-check { display: inline-flex; align-items: center; min-height: 32px; gap: var(--space-2, 0.5rem); font-size: var(--fs-sm, 0.875rem); color: var(--color-text-2, inherit); }
.tool-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-border, rgba(128,128,128,0.25)); border-radius: var(--radius-md, 9px); overflow: hidden; }
.tool-mode .tool-check { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); background: var(--color-surface, transparent); }
.tool-mode .tool-check + .tool-check { border-left: 1px solid var(--color-border, rgba(128,128,128,0.25)); }
.tool-verdict--bad { color: var(--color-error, #c53030); }
.tool-verdict--good { color: var(--color-success, #2f855a); }
.tool-suggestions { display: grid; gap: var(--space-2, 0.5rem); margin-top: var(--space-4, 1rem); }
.tool-suggestion {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-sm, 0.875rem);
  text-align: left;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--color-input-bg, rgba(128,128,128,0.08));
  border: 1px solid var(--color-border, rgba(128,128,128,0.25));
  border-radius: var(--radius-md, 9px);
  color: var(--color-text, inherit);
  cursor: pointer;
  min-height: 44px;
  width: 100%;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.tool-suggestion:hover { border-color: var(--border-hover, rgba(128,128,128,0.4)); background: var(--hover-veil, rgba(128,128,128,0.07)); }
.tool-box input[type='range'] { width: 100%; accent-color: var(--accent, #3f70e3); }

@media (min-width: 640px) {
  .tool-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559.98px) {
  .tool-box { padding: var(--space-5, 1.5rem); }
  .tool-output-row { grid-template-columns: 1fr; }
  .tool-output-row .button { width: 100%; }
  .tool-input-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-input-row input { grid-column: 1 / -1; }
  .tool-input-row .button { width: 100%; }
  .tool-strength { grid-template-columns: 1fr; }
  .tool-mode { grid-template-columns: 1fr; }
  .tool-mode .tool-check + .tool-check { border-top: 1px solid var(--color-border, rgba(128,128,128,0.25)); border-left: 0; }
}