/*# source: assets/css/components/tool-layout-system.css */
/* MetricLab Design System: Tool Layout System
   Page-level architecture only. Visual primitives remain owned by core cards,
   buttons, fields, tool-shell, affiliate, FAQ, ambient, navigation and footer. */
:root {
  --tool-layout-section-gap: var(--space-2xl);
  --tool-layout-section-gap-mobile: var(--mobile-section-gap);
  --tool-layout-content-gap: var(--space-lg);
  --tool-layout-compact-gap: var(--space-sm);
  --tool-layout-hero-max-width: var(--ml-container-narrow);
  --tool-layout-content-max-width: var(--ml-container-readable);
  --tool-layout-surface-max-width: var(--container-default);
  --tool-layout-surface-max-width-wide: var(--container-wide);
}

.ml-tool-page,
.ml-tool-flow,
.ml-tool-hero,
.ml-tool-surface,
.ml-tool-result-area,
.ml-tool-education,
.ml-tool-related,
.ml-tool-affiliate,
.ml-tool-faq {
  min-width: 0;
}

.ml-tool-flow {
  width: 100%;
}

.ml-tool-page-layout {
  display: flex;
  flex-direction: column;
  gap: var(--tool-layout-section-gap);
  min-width: 0;
}

.ml-tool-hero {
  width: min(100%, var(--tool-layout-hero-max-width));
  margin-inline: auto;
}

.ml-tool-hero > :first-child,
.ml-tool-section > :first-child,
.ml-tool-education > :first-child,
.ml-tool-related > :first-child,
.ml-tool-affiliate > :first-child,
.ml-tool-faq > :first-child {
  margin-top: 0;
}

.ml-tool-hero > :last-child,
.ml-tool-section > :last-child,
.ml-tool-education > :last-child,
.ml-tool-related > :last-child,
.ml-tool-affiliate > :last-child,
.ml-tool-faq > :last-child {
  margin-bottom: 0;
}

.ml-tool-surface,
.ml-tool-result-area,
.ml-tool-section,
.ml-tool-education,
.ml-tool-related,
.ml-tool-affiliate,
.ml-tool-faq {
  width: min(100%, var(--tool-layout-surface-max-width));
  margin-inline: auto;
}

.ml-tool-page-layout--image .ml-tool-surface,
.ml-tool-page-layout--message .ml-tool-surface,
.ml-tool-page-layout--text .ml-tool-surface {
  --tool-layout-surface-max-width: var(--tool-layout-surface-max-width-wide);
}

.ml-tool-education {
  --tool-layout-surface-max-width: var(--tool-layout-content-max-width);
}

.ml-tool-section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tool-layout-content-gap);
}

.ml-tool-actions,
.ml-tool-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tool-layout-compact-gap);
  align-items: center;
}

@media (width <= 720px) {
  .ml-tool-page-layout {
    gap: var(--tool-layout-section-gap-mobile);
  }
}