/* Tool pages (type: tool), /tools/ and /worksheets/ catalogues, shared blocks.
   Uses the site's tokens from custom.css (--mtp-*). New styles live here only. */
.mtp-tool { max-width: 920px; }
.mtp-tool h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.02; margin-bottom: 10px; }
.mtp-tool-noscript { padding: 14px 16px; border: 1px dashed var(--mtp-line); color: var(--mtp-muted); }

/* Tool surface: panel look matching .mtp-trainer, reusable by any tool widget. */
.mtp-tool-panel {
  margin: 10px 0 34px; padding: clamp(16px, 3vw, 30px);
  background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px;
}
.mtp-tool-panel label { color: var(--mtp-muted); font-size: 13px; }
.mtp-tool-panel input[type="number"], .mtp-tool-panel input[type="text"], .mtp-tool-panel select, .mtp-tool-panel textarea {
  min-height: 40px; padding: 6px 10px; background: var(--mtp-night); color: var(--mtp-paper);
  border: 1px solid var(--mtp-line); border-radius: 2px; font: inherit; font-size: 15px; max-width: 100%; box-sizing: border-box;
}
.mtp-tool-panel button:not(.mtp-button) {
  min-height: 40px; padding: 6px 16px; background: transparent; color: var(--mtp-paper);
  border: 1px solid var(--mtp-line); border-radius: 2px; font: inherit; font-size: 14px; cursor: pointer;
}
.mtp-tool-panel button:not(.mtp-button):hover { border-color: var(--mtp-brass); color: var(--mtp-brass-bright); }
.mtp-tool-panel button[aria-pressed="true"] { background: var(--mtp-raised-2); color: var(--mtp-brass-bright); border-color: var(--mtp-brass); }
.mtp-tool button:focus-visible, .mtp-tool select:focus-visible, .mtp-tool input:focus-visible, .mtp-tool summary:focus-visible { outline: 2px solid var(--mtp-brass-bright); outline-offset: 2px; }

/* How to / body / FAQ */
.mtp-tool-block, .mtp-tool-body { margin: 0 0 34px; }
.mtp-tool-howto ol { margin: 0; padding-left: 1.3em; }
.mtp-tool-howto li { margin: 0 0 8px; max-width: 70ch; }
.mtp-tool-faq details { border-top: 1px solid var(--mtp-line); padding: 0; }
.mtp-tool-faq details:last-of-type { border-bottom: 1px solid var(--mtp-line); }
.mtp-tool-faq summary { cursor: pointer; padding: 14px 4px; font-weight: 600; min-height: 44px; box-sizing: border-box; }
.mtp-faq-a { padding: 0 4px 14px; color: var(--mtp-muted); max-width: 70ch; }
.mtp-faq-a p { margin: 0 0 8px; }
.mtp-tool-body table { display: block; max-width: 100%; overflow-x: auto; }

/* Catalogue pages */
.mtp-tools-index { max-width: 1040px; }
.mtp-tgroup { margin: 34px 0 0; }
.mtp-tgroup h2 { margin: 0 0 14px; font-size: 22px; }
.mtp-tgroup-note { margin: -6px 0 14px; color: var(--mtp-muted); }
.mtp-tgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mtp-tcard { margin: 0; padding: 0; }
.mtp-tcard a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; min-height: 44px;
  padding: 16px 18px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px;
  text-decoration: none; color: var(--mtp-paper);
}
.mtp-tcard a:hover { border-color: var(--mtp-brass); background: var(--mtp-raised-2); }
.mtp-tcard strong { font-size: 17px; line-height: 1.2; color: var(--mtp-brass-bright); }
.mtp-tcard span { color: var(--mtp-muted); font-size: 14px; line-height: 1.4; }

@media (max-width: 720px) { .mtp-tool-panel { margin-left: 0; margin-right: 0; } }
@media print {
  .mtp-tool-howto, .mtp-tool-faq, .mtp-tool-related { break-inside: avoid; }
}