/* Splice Crop: the product pages' own layout. Everything else comes from s/smart_v200.css. */

/* splice-crop --help: the app's five buttons beside the notes */
.body.howto {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px;
}
.howto > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.howto h3 { font-weight: 400; }

.tools {
	border-top: 1px solid var(--rule);
	font-family: var(--sans); font-size: var(--fs-read); color: var(--ink-strong);
}
.tools li {
	display: flex; align-items: center; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--rule);
}
/* As they look in the app: white on Too Much Smart red, and Home on white */
.tool {
	display: grid; place-items: center; flex: none;
	width: 40px; height: 40px; border-radius: 50%; background: var(--smart);
}
.tool img { width: 20px; height: 20px; }
.tool.home { background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.tool.inline { display: inline-grid; width: 1.75em; height: 1.75em; vertical-align: middle; }
.tool.inline img { width: 0.875em; height: 0.875em; }

@media (max-width: 639px) {
	.body.howto { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}