/* PDFlyHQ — tools/pdf-bookmarks-editor/layout.css
   Tool shell only. Copied from tools/add-watermark/layout.css — same
   category color (Edit = green). Self-contained: tokens only. */

.tool-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
}

.tool-header {
  margin-bottom: var(--space-6);
  animation: page-in 500ms var(--ease-out);
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tool-header h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
}
@media (min-width: 768px) { .tool-header h1 { font-size: var(--text-3xl); } }
@media (min-width: 1024px) { .tool-header h1 { font-size: 44px; } }

/* Category chip — edit = green, matches this tool's home-grid card. */
.tool-eyebrow {
  display: inline-block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cat-edit);
  background: color-mix(in srgb, var(--color-cat-edit) 10%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.tool-header__content > p {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 56ch;
}

.tool-privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-success-600);
  background: color-mix(in srgb, var(--color-success-500) 12%, transparent);
  border-radius: var(--radius-full);
}
:root[data-theme="dark"] .tool-privacy { color: var(--color-success-500); }
.tool-privacy svg { flex: none; width: 16px; height: 16px; }

.tool-steps-wrap {
  margin-bottom: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  animation: page-in 500ms var(--ease-out) 80ms both;
}
@media (min-width: 640px) { .tool-steps-wrap { padding: var(--space-8); } }

.tool-step { animation: step-in var(--duration-slower) var(--ease-out); }
.tool-step.hidden { display: none; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}