/* layout.css — page shells, grids, header/footer, breakpoints (02 §5.1, §5.5).
   Breakpoints: sm 640px (two-column blocks may sit side-by-side), lg 1024px (full desktop layout).
   Populated as app/templates/layout/base.php and page templates are built out (Phase 1+). */

/* Tool page shell (05 §6): interaction area must read as visually distinct from surrounding
   page chrome, without needing its own block -- this is page-level layout, not a block. */
.mt-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--mt-space-4);
}
.mt-tool-description {
  color: var(--mt-color-text-muted);
  margin-bottom: var(--mt-space-6);
}
.mt-interaction-area {
  margin-bottom: var(--mt-space-6);
}
.mt-category-shortcut-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
  margin-bottom: var(--mt-space-6);
}
.mt-category-shortcut-row a {
  padding: var(--mt-space-2) var(--mt-space-3);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-sm);
  color: var(--mt-color-text);
  text-decoration: none;
  font-size: var(--mt-font-size-sm);
}
.mt-tool-list {
  list-style: none;
  padding: 0;
}
.mt-tool-list li {
  padding: var(--mt-space-3) 0;
  border-bottom: 1px solid var(--mt-color-border);
}