/* ═══════════════════════════════════════════════════════════════
   TANK LOGIC — substrate-calculator.css
   Tool-specific styles for the Substrate & Gravel Calculator.

   DEPENDENCIES: system.css + style.css + tool.css MUST load first.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Multi-Page Step Animation ─────────────────────── */
#step2 {
  animation: substrate-step-in 0.32s var(--ease) both;
}
@keyframes substrate-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── In-Content Ad Slot ────────────────────────────── */
/* ─── Sticky Sidebar Ad (desktop only) ──────────────── */
/* ─── Slope Checkbox ────────────────────────────────── */
.input-group input[type="checkbox"]#slopeToggle {
  width: auto;
  margin-right: 8px;
  cursor: pointer;
  accent-color: var(--accent);
  transform: translateY(1px);
}

/* ─── Result Insight ────────────────────────────────── */
.result-insight {
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
}
.result-insight strong { color: var(--accent); }
.result-insight--warning {
  background: var(--sand-subtle);
  border-color: var(--sand-border);
}
.result-insight--warning strong { color: var(--sand); }

/* ─── Preset chips: 2-column on wider screens ───────── */
#step1 .preset-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 560px) {
  #step1 .preset-list { grid-template-columns: 1fr 1fr; }
}

/* ─── Mobile tweaks ─────────────────────────────────── */
@media (max-width: 640px) {
  .panel-title-row { flex-wrap: wrap; gap: 8px; }
  .panel-title-row .btn { width: 100%; }
}