/* ═══════════════════════════════════════════════════════════════
   TANK LOGIC — medication-dosing-calculator.css
   Tool-specific styles for the Medication & Chemical Dosing Calculator.

   DEPENDENCIES: system.css + style.css + tool.css MUST load first.
   This file only adds what tool.css doesn't already cover:
     - Multi-page (Step 1 → Ad → Step 2) reveal animation
     - In-content ad slot sizing
     - Result insight callouts
     - Preset chip refinements
   ═══════════════════════════════════════════════════════════════ */

/* ─── Multi-Page Step Animation ───────────────────────
   When #step2 is revealed after the user clicks "Calculate",
   it slides in to reinforce the "new page" feeling without an
   actual route change. Keeps ad viewability high because the
   user visually registers the new screen state.
   ──────────────────────────────────────────────────── */
#step2 {
  animation: dosing-step-in 0.32s var(--ease) both;
}
@keyframes dosing-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── In-Content Ad Slot (between Step 1 and Step 2) ──
   Empty until JS reveals it after the user clicks "Calculate".
   Sized for both AdSense "in-article" (responsive) and
   Mediavine "in-content" (typically 728×90 or 970×250).
   Stays visible after results render — the highest-viewability
   position on the entire page. */
/* ─── Sticky Sidebar Ad (desktop only) ────────────────
   Mirrors the in-content slot on the right rail.
   Hidden on mobile (≤900px) by the existing tool.css rule
   that collapses the sidebar into a single column. */
@media (max-width: 900px) {
}

/* ─── Result Insight Callout ────────────────────────── */
.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%; }
}