/* Раздел инструментов /services/: блок инструмента, карточки, связи. */
.tool-lead { margin-top: var(--s-3); color: var(--c-muted); font-size: 1.05rem; }
.tool-lead p { margin: 0; }
.tool {
  margin: var(--s-5) 0 var(--s-6); padding: var(--s-5);
  border: 1px solid var(--c-tint-frame); border-radius: var(--r-panel); background: var(--c-tint);
}
.tool__panel { display: grid; gap: var(--s-4); }
.tool__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.tool__row--range input[type=range] { flex: 1 1 12rem; accent-color: var(--c-ink); }
.tool__value { font-weight: 600; }
.tool input[type=number], .tool select, .tool input[type=text], .tool textarea {
  font: inherit; color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-tint-line); border-radius: var(--r-small); padding: 0.45rem 0.6rem;
}
.tool input:focus-visible, .tool select:focus-visible, .tool textarea:focus-visible, .tool button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1px; }
.tool__num { width: 5.5rem; }
.tool__checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.tool__checks legend { font-weight: 600; margin-bottom: var(--s-2); padding: 0; }
.tool__checks label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.tool__checks input { accent-color: var(--c-ink); width: 1.05rem; height: 1.05rem; }
.tool__btn {
  font: inherit; font-weight: 600; cursor: pointer; padding: 0.55rem 1.1rem;
  border-radius: var(--r-small); border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-on-ink);
}
.tool__btn:hover { background: var(--c-ink-strong); border-color: var(--c-ink-strong); }
.tool__btn--ghost { background: transparent; color: var(--c-ink); }
.tool__btn--ghost:hover { background: var(--c-ink); color: var(--c-on-ink); }
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.tool__results { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.tool__results li { display: flex; align-items: center; gap: var(--s-3); padding: 0.5rem 0.75rem; background: var(--c-bg); border: 1px solid var(--c-tint-line); border-radius: var(--r-small); }
.tool__results code { flex: 1; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.02rem; word-break: break-all; background: none; padding: 0; }
.tool__copy { font: inherit; font-size: var(--fs-small); cursor: pointer; border: 0; background: none; color: var(--c-ink); font-weight: 600; white-space: nowrap; }
.tool__copy:hover { text-decoration: underline; }
.tool__strength { margin: 0; font-weight: 600; }
.tool__strength--weak { color: var(--c-bad); }
.tool__strength--medium { color: var(--c-warn); }
.tool__strength--strong, .tool__strength--very-strong { color: var(--c-good); }
.tool__output { width: 100%; min-height: 12rem; resize: vertical; line-height: 1.55; }
.tool__stats, .tool__note { margin: 0; font-size: var(--fs-small); color: var(--c-tint-label); }
.tool-related { margin: var(--s-7) 0 var(--s-6); }
.tool-related__title { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.tool-group__intro { margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--c-muted); }
.tool-card .cat-card__name a { color: inherit; text-decoration: none; }
.tool-card .cat-card__name a:hover { color: var(--c-ink); }
@media (max-width: 480px) { .tool { padding: var(--s-4); } }
.tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3) var(--s-4); }
.tool__grid label, .tool__wide { display: grid; gap: 0.35rem; font-weight: 600; }
.tool__grid input, .tool__grid select, .tool__wide input, .tool__wide textarea { width: 100%; font-weight: 400; }
.tool__grid [hidden] { display: none; }
.tool__grid input[type=color] { height: 2.5rem; padding: 0.2rem; }
.tool__num--wide { width: 9rem; }
.tool__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); margin: 0; }
.tool__out:empty { display: none; }
.tool__out div { padding: 0.6rem 0.8rem; background: var(--c-bg); border: 1px solid var(--c-tint-line); border-radius: var(--r-small); }
.tool__out dt { font-size: var(--fs-small); color: var(--c-tint-label); }
.tool__out dd { margin: 0.15rem 0 0; font-weight: 600; font-size: 1.15rem; }
.tool__out .is-bad dd { color: var(--c-bad); }
.tool__out .is-good dd { color: var(--c-good); }
.tool__findings { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--s-2); }
.tool__findings:empty { display: none; }
.tool__qr { display: flex; justify-content: center; }
.tool__qr canvas { width: min(100%, 18rem); height: auto; border-radius: var(--r-small); border: 1px solid var(--c-tint-line); background: #fff; }
.tool__thumbs { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.tool__thumb { margin: 0; }
.tool__thumb img { display: block; width: 100%; height: auto; border-radius: var(--r-small); border: 1px solid var(--c-tint-line); }
.tool__thumb figcaption { margin-top: var(--s-1); font-size: var(--fs-small); }
.tool .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }