/* ==========================================================================
   FastToolsHQ App — tools.css
   Shared shell styling for individual tool pages (inside /tools/*).
   Tool-specific styles (e.g. wheel.css) live alongside each tool.
   ========================================================================== */

.tool {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Compact tool header with a back button — no big website header */
.tool-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: calc(var(--header-height) + var(--safe-top));
  padding: var(--safe-top) var(--sp-3) 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.tool-header__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.tool-header__spacer { flex: 1; }

.tool-body {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4)
           calc(var(--safe-bottom) + var(--sp-8));
}

/* Placeholder "coming soon" panel used by Phase 1 stub tools */
.placeholder {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
}
.placeholder__icon {
  width: 84px; height: 84px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  display: grid; place-items: center;
  animation: float 3s ease-in-out infinite;
}
.placeholder__icon img, .placeholder__icon svg { width: 48px; height: 48px; }
.placeholder__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.placeholder__desc {
  color: var(--on-surface-muted);
  max-width: 380px;
  margin: 0 auto var(--sp-6);
}
.placeholder__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--on-surface-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .placeholder__icon { animation: none; }
}