/* ============================================================
   QUANT TOOLS — interactive calculators
   Page-scoped CSS, depends on style.css base
   ============================================================ */

.tool-body { background: #0e1421; color: #f0f4fa; min-height: 100vh; }
html[data-rp-theme="light"] .tool-body { background: #f5f1e8; color: #1a1f2e; }

.tool-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.tool-breadcrumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #8fa1bd;
  margin: 8px 0 24px;
}
.tool-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tool-breadcrumb a { color: #5fe0b4; text-decoration: none; }
.tool-breadcrumb a:hover { text-decoration: underline; }
.tool-breadcrumb li:not(:last-child)::after { content: "›"; color: #4a5a78; margin-left: 4px; }
html[data-rp-theme="light"] .tool-breadcrumb { color: #5a6b82; }
html[data-rp-theme="light"] .tool-breadcrumb a { color: #067b55; }

.tool-hero {
  margin: 16px 0 32px;
  padding: 32px 28px;
  border-radius: 14px;
  border: 1px solid #34425a;
  background: linear-gradient(135deg, #0e1421 0%, #1a3e2e 60%, #0e1421 100%);
}
.tool-hero__cat {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: #5fe0b4;
  margin-bottom: 12px;
}
.tool-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #f0f4fa;
}
.tool-hero p {
  color: #8fa1bd;
  margin: 0;
  max-width: 800px;
  line-height: 1.6;
}
html[data-rp-theme="light"] .tool-hero {
  background: linear-gradient(135deg, #f0e9d6 0%, #e8d9b3 60%, #f0e9d6 100%);
  border-color: #d4af37;
}
html[data-rp-theme="light"] .tool-hero h1 { color: #1a1f2e; }
html[data-rp-theme="light"] .tool-hero p { color: #4a5a78; }
html[data-rp-theme="light"] .tool-hero__cat { color: #067b55; }

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 800px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid #34425a;
  border-radius: 12px;
  padding: 20px;
}
html[data-rp-theme="light"] .tool-card {
  background: #fffaeb;
  border-color: #d8d2c4;
}
.tool-card h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  margin: 0 0 12px;
  color: #ffc566;
}
html[data-rp-theme="light"] .tool-card h2 { color: #b8860b; }
.tool-card label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #8fa1bd;
  margin: 12px 0 6px;
  letter-spacing: 0.5px;
}
.tool-card input[type="number"],
.tool-card input[type="text"],
.tool-card textarea,
.tool-card select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #4a5a78;
  border-radius: 6px;
  color: #f0f4fa;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  box-sizing: border-box;
}
html[data-rp-theme="light"] .tool-card input,
html[data-rp-theme="light"] .tool-card textarea,
html[data-rp-theme="light"] .tool-card select {
  background: #fff;
  color: #1a1f2e;
  border-color: #c0c8d4;
}
.tool-card textarea { min-height: 120px; resize: vertical; font-size: 12px; }
.tool-card .tool-help {
  font-size: 11px;
  color: #6a7a92;
  margin: 4px 0 0;
  font-style: italic;
}

.tool-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #5fe0b4, #4ac79a);
  color: #0e1421;
  border: none;
  border-radius: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.tool-btn:hover { background: linear-gradient(135deg, #6ee5bd, #5dd4a8); }
.tool-btn--ghost {
  background: transparent;
  color: #5fe0b4;
  border: 1px solid #5fe0b4;
}
.tool-btn--ghost:hover { background: rgba(95,224,180,0.1); }

.tool-results {
  margin-top: 24px;
  padding: 20px;
  background: rgba(95,224,180,0.05);
  border: 1px solid rgba(95,224,180,0.3);
  border-radius: 8px;
  display: none;
}
.tool-results.is-visible { display: block; }
.tool-results h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  color: #5fe0b4;
  margin: 0 0 16px;
}
html[data-rp-theme="light"] .tool-results h3 { color: #067b55; }
.tool-results table {
  width: 100%;
  border-collapse: collapse;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
.tool-results td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(95,224,180,0.15);
}
.tool-results td:first-child { color: #8fa1bd; }
.tool-results td:last-child {
  text-align: right;
  font-weight: 700;
  color: #f0f4fa;
}
html[data-rp-theme="light"] .tool-results td:last-child { color: #1a1f2e; }
.tool-results .metric-good  { color: #5fe0b4 !important; }
.tool-results .metric-warn  { color: #ffc566 !important; }
.tool-results .metric-bad   { color: #ff6b6b !important; }
.tool-results .metric-note  { font-size: 11px; color: #8fa1bd; padding-top: 8px; font-style: italic; border-top: 1px solid rgba(95,224,180,0.15); }

.tool-related {
  margin-top: 32px;
  padding: 20px;
  background: rgba(255,197,102,0.05);
  border: 1px solid rgba(255,197,102,0.2);
  border-radius: 8px;
}
.tool-related h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  color: #ffc566;
  margin: 0 0 12px;
}
.tool-related ul { padding-left: 20px; margin: 0; }
.tool-related li { margin: 6px 0; color: #8fa1bd; }
.tool-related a { color: #5fe0b4; text-decoration: none; }
.tool-related a:hover { text-decoration: underline; }
html[data-rp-theme="light"] .tool-related a { color: #067b55; }

.tool-disclaimer {
  margin-top: 32px;
  padding: 16px;
  background: rgba(255,107,107,0.05);
  border: 1px solid rgba(255,107,107,0.2);
  border-radius: 8px;
  font-size: 12px;
  color: #b8a89a;
  line-height: 1.5;
}
html[data-rp-theme="light"] .tool-disclaimer { color: #8a6f5a; }

/* Tools landing grid */
.tools-landing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 800px) { .tools-landing-grid { grid-template-columns: 1fr; } }
.tool-tile {
  display: block;
  padding: 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid #34425a;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.tool-tile:hover {
  border-color: #5fe0b4;
  transform: translateY(-2px);
}
html[data-rp-theme="light"] .tool-tile {
  background: #fffaeb;
  border-color: #d8d2c4;
}
.tool-tile__cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #5fe0b4;
}
.tool-tile h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  color: #f0f4fa;
  margin: 8px 0 12px;
}
html[data-rp-theme="light"] .tool-tile h3 { color: #1a1f2e; }
.tool-tile p {
  font-size: 14px;
  color: #8fa1bd;
  margin: 0 0 12px;
  line-height: 1.5;
}
.tool-tile__cta {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #ffc566;
  letter-spacing: 1px;
}