/* Tool showcase (design-direction.md #9). Root class: .mmc-tools. Every rule is nested under
   it (including .mm-tools/.mm-tool, which without the prefix could otherwise match an
   unrelated same-named class elsewhere on the page). */
.mmc-tools { padding-block: var(--mm-section-y); }
/* This band is full-bleed, with the inset-from-the-edge already handled by base.css's
   .mm-surface-dark rule (padding-inline, shared by every surface) -- .mm-split (the side-heading
   + tools-grid wrapper, base.css) just fills whatever width that padding already left available,
   no max-width/centering of its own needed. */
.mmc-tools .mm-tools { display: grid; gap: var(--mm-grid-gap); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 690px) { .mmc-tools .mm-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mmc-tools .mm-tool { display: grid; gap: var(--mm-space-4); align-content: start; min-width: 0; padding: var(--mm-space-4); background: var(--mm-bg-card); border: 1px solid var(--mm-border); border-radius: var(--mm-radius-md); }
.mmc-tools .mm-tool__text { font: 500 var(--mm-font-size-ui)/1.45 var(--mm-font-ui); color: var(--mm-text); }