/* Interactive blog tools (calculators / planners / pickers).
   Each tool is rendered by tools.js into a <div class="te-tool" data-tool="..."></div>
   embedded in a blog post's markdown. Styles are scoped under .te-tool so they never
   collide with the article's own typography. */

.te-tool {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(180deg, #f8f9ff 0%, #f1f3fb 100%);
  border: 1px solid #e2e6f5;
  border-radius: 14px;
  padding: 24px 26px;
  margin: 40px 0;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.06);
}
.te-tool * { box-sizing: border-box; }
.te-tool-eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #667eea; margin-bottom: 6px;
}
.te-tool-title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; line-height: 1.25; }
.te-tool-sub { font-size: 14px; color: #64748b; margin: 0 0 18px; line-height: 1.5; }
.te-tool-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.te-tool-field { flex: 1; min-width: 150px; }
.te-tool-field label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.te-tool input[type="number"],
.te-tool input[type="time"],
.te-tool select {
  width: 100%; padding: 10px 12px; font-size: 15px; color: #1a1a2e;
  border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; font-family: inherit;
}
.te-tool input:focus, .te-tool select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
.te-tool-check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 15px; color: #334155; cursor: pointer; border-bottom: 1px solid #eef1fa; }
.te-tool-check:last-of-type { border-bottom: none; }
.te-tool-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: #667eea; flex-shrink: 0; }
.te-tool-btn {
  display: inline-block; background: #667eea; color: #fff; border: none; border-radius: 9px;
  padding: 11px 22px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.te-tool-btn:hover { background: #5a67d8; }
.te-tool-result {
  margin-top: 18px; padding: 18px 20px; background: #fff; border: 1px solid #e2e6f5;
  border-radius: 10px; font-size: 15px; color: #1a1a2e; line-height: 1.6;
}
.te-tool-result.empty { display: none; }
.te-tool-result h4 { margin: 0 0 8px; font-size: 16px; color: #1a1a2e; }
.te-tool-result .te-big { font-size: 30px; font-weight: 800; color: #667eea; line-height: 1.1; }
.te-tool-result .te-grid { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0; }
.te-tool-result .te-stat { flex: 1; min-width: 110px; }
.te-tool-result .te-stat span { display: block; }
.te-tool-result .te-stat .n { font-size: 22px; font-weight: 800; color: #1a1a2e; }
.te-tool-result .te-stat .l { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.te-tool-cta { margin-top: 14px; font-size: 14px; }
.te-tool-cta a { color: #667eea; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.te-tool-foot { margin-top: 14px; font-size: 12px; color: #94a3b8; }
.te-tool table.te-tool-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.te-tool table.te-tool-table th, .te-tool table.te-tool-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eef1fa; }
.te-tool table.te-tool-table th { color: #64748b; font-weight: 700; font-size: 12px; text-transform: uppercase; }