/* usage and commands: a title band, a sticky contents column, and the page */
.doc-head { padding: 64px 48px 48px; border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 5fr 7fr; gap: 0 48px; align-items: end; }
.doc-head h1 { font-size: var(--fs-l); }
.doc-head p { margin: 0; color: var(--soft); max-width: 58ch; }
.doc { display: grid; grid-template-columns: 5fr 7fr; }
.toc { padding: 40px 48px; border-right: 1px dashed var(--rule); }
.toc ol { position: sticky; top: 32px; list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; border-bottom: 1px dashed var(--rule); }
.toc a { display: grid; grid-template-columns: 34px 1fr; padding: 7px 0; text-decoration: none; color: var(--soft); font-size: var(--fs-s); transition: color .2s; }
.toc a::before { content: counter(t, decimal-leading-zero); font: 400 var(--fs-s) var(--dot); padding-top: 3px; }
.toc a:hover, .toc a.on { color: var(--ink); }
.page { padding: 40px 48px 80px; min-width: 0; }
.page > section { border-top: 1px solid var(--ink); padding: 28px 0 48px; scroll-margin-top: 16px; }
.page > section:first-child { border-top: 0; padding-top: 0; }
.page h2 { margin: 0 0 14px; font: 300 var(--fs-l)/1.15 var(--sans); letter-spacing: -.02em; }
.page h2 small { display: block; margin-bottom: 8px; font: 400 var(--fs-s) var(--dot); letter-spacing: .08em; color: var(--soft); }
.page p { margin: 0 0 14px; max-width: 64ch; }
.page p.soft, .page .soft { color: var(--soft); }
.page ul { margin: 0 0 14px; padding-left: 18px; max-width: 64ch; }
.page li { margin-bottom: 4px; }
.page b { font-weight: 600; }
.ui { font-weight: 500; border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
kbd { font: 400 var(--fs-s) var(--dot); border: 1px solid var(--ink); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; white-space: nowrap; }

/* screenshot slots: a placeholder the size of the screenshot that will replace it */
.shot { margin: 22px 0 0; }
.shot .frame { position: relative; aspect-ratio: 16 / 10; border: 1px dashed var(--ink); background: repeating-linear-gradient(135deg, transparent 0 9px, oklch(0.16 0.005 220 / .05) 9px 10px), var(--paper-2); display: grid; place-items: center; text-align: center; padding: 24px; }
.shot .frame b { display: block; font: 400 var(--fs-s) var(--dot); letter-spacing: .12em; margin-bottom: 6px; }
.shot .frame span { font: italic 400 var(--fs-m)/1.4 var(--serif); color: var(--soft); max-width: 46ch; }
.shot img { display: block; width: 100%; border: 1px solid var(--ink); }
.shot figcaption { margin-top: 10px; }
.shot.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* below this the doc column is too narrow for two frames side by side */
@media (max-width: 1100px) { .shot.pair { grid-template-columns: minmax(0, 1fr); } }
.shot.pair .frame { aspect-ratio: 4 / 3; }

/* numbered steps */
.steps { list-style: none; padding: 0; margin: 6px 0 18px; counter-reset: s; border-top: 1px solid var(--ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--rule); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 var(--fs-s) var(--dot); color: var(--soft); padding-top: 3px; }
.steps p { margin: 0 0 8px; }
.steps li > div > :last-child { margin-bottom: 0; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 20px 0 6px; }
.get .soft { font: 400 var(--fs-s) var(--dot); }

/* command tables */
.cmds { width: 100%; border-collapse: collapse; margin: 6px 0 18px; border-top: 1px solid var(--ink); }
.cmds td { padding: 11px 0; border-bottom: 1px dashed var(--rule); vertical-align: top; }
.cmds td:first-child { width: 46%; padding-right: 24px; font: 400 var(--fs-s)/1.6 var(--dot); }
.cmds td:last-child { color: var(--soft); font-size: var(--fs-s); }
.cmds td:first-child i { font-style: normal; color: var(--soft); }
.page pre { margin: 0 0 18px; padding: 12px 14px; background: var(--paper-2); font: 400 var(--fs-s)/1.7 var(--dot); white-space: pre-wrap; overflow-wrap: anywhere; }
.page h3 { margin: 22px 0 8px; font: 400 var(--fs-s) var(--dot); letter-spacing: .08em; }
.page > section.ext { background: var(--hatch); padding-inline: 20px; }
.page > section.ext .tag { margin: 0 0 16px; }
.note-box { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; margin: 0 0 18px; color: var(--soft); max-width: 64ch; }
.note-box b { color: var(--ink); }

@media (max-width: 760px) {
	.doc-head { grid-template-columns: 1fr; gap: 16px; padding: 40px 16px 32px; }
	.doc { grid-template-columns: 1fr; }
	.toc { display: none; }
	.page { padding: 28px 16px 56px; }
	.page h2 { font-size: var(--fs-l); }
	.ui { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
	.steps li { grid-template-columns: 32px 1fr; gap: 8px; }
	.cmds, .cmds tbody, .cmds tr, .cmds td { display: block; width: 100% !important; }
	.cmds tr { border-bottom: 1px dashed var(--rule); padding: 10px 0; }
	.cmds td { border: 0; padding: 0; }
	.cmds td:first-child { padding: 0 0 4px; }
}