/* tool_runtime.css — the kit's shared look, for every tool module: controls that match the
   landing template (same tokens, same buttons), the after_result CTA, and print mode. Modules
   use these classes rather than restyling buttons: .tool-btn (+ --primary), .tool-link,
   .tool-field, .tool-help, .tool-error, .tool-status. Tokens come from the site's _base.html;
   the fallbacks keep a tool legible on a template without them. */

.tool { margin-top: 1rem; }

.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1.2rem;
  font: inherit; font-size: .98rem; font-weight: 500; line-height: 1.2;
  color: var(--text, #1F1A14); background: var(--surface, #fff);
  border: 1px solid var(--outline, #E8E1D5); border-radius: var(--r-md, 12px);
  cursor: pointer; text-decoration: none;
}
.tool-btn:hover { background: var(--card-alt, #F7F3EC); text-decoration: none; }
.tool-btn--primary {
  color: var(--bg, #FAF7F2); background: var(--text, #1F1A14); border-color: var(--text, #1F1A14);
  font-weight: 600;
}
.tool-btn--primary:hover { background: #2f2a22; color: var(--bg, #FAF7F2); }
.tool-btn[disabled] { opacity: .45; cursor: not-allowed; }
.tool-link {
  font: inherit; font-size: .92rem; padding: .25rem .1rem; margin: 0;
  color: var(--accent-text, #1F6FD4); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.tool :focus-visible { outline: 2px solid var(--accent-text, #1F6FD4); outline-offset: 2px; }

.tool-field { margin: 0 0 1.25rem; }
.tool-field > label, .tool label[for] { display: block; font-weight: 600; color: var(--text, #1F1A14); margin-bottom: .35rem; }
.tool input[type="text"], .tool input[type="number"], .tool select {
  font: inherit; font-size: 1rem; color: var(--text, #1F1A14);
  background: var(--surface, #fff); border: 1px solid var(--outline, #E8E1D5);
  border-radius: var(--r-md, 12px); padding: .6rem .8rem; min-height: 44px;
  width: 100%; max-width: 100%;
}
.tool input[type="number"] { width: 8rem; }
.tool input[aria-invalid="true"] { border-color: #c0294a; }
.tool .tool-help { font-size: .88rem; color: var(--text-dim, #7A7268); margin: .35rem 0 0; }
.tool .tool-error { font-size: .9rem; color: #c0294a; margin: .35rem 0 0; min-height: 0; }
.tool .tool-error:empty, .tool .tool-status:empty { display: none; }
.tool .tool-status { font-size: .95rem; color: var(--text-meta, #4A4339); margin: .6rem 0 0; }

/* after_result — the conversion step, shown beside the result once the tool has delivered. */
.tool-after {
  background: var(--surface-warm, #FFF1EC); border: 1px solid var(--warm-dim, rgba(255,138,107,.12));
  border-radius: var(--r-2xl, 28px); padding: 1.5rem 1.75rem; margin: 1.25rem 0;
}
.tool .tool-after h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--text, #1F1A14); }
.tool .tool-after p { margin: 0 0 1rem; color: var(--text-meta, #4A4339); }
/* The landing template colours every link in its body (main.landing-body a); a button-styled
   link keeps its button colours. */
.tool a.tool-btn, .tool a.tool-btn:hover { color: var(--text, #1F1A14); text-decoration: none; }
.tool a.tool-btn--primary, .tool a.tool-btn--primary:hover { color: var(--bg, #FAF7F2); }

/* Print mode — tool_runtime.js appends .tool-print-root to <body> and sets html.tool-printing
   for the duration of the print dialog. Everything else on the page is hidden. */
.tool-print-root { display: none; }
/* Modules cannot declare @page (their CSS is scoped), so the runtime sets one margin that suits
   both A4 and US Letter. */
@page { margin: 12mm; }
@media print {
  html.tool-printing body > :not(.tool-print-root) { display: none !important; }
  html.tool-printing body { background: #fff; }
  html.tool-printing .tool-print-root { display: block; }
}