/* From installer to desktop: a heading, the guest switch, a route map whose
   corridors are the steps, and the detail of the step picked. */
.project-flow { margin: 2rem 0; padding-block: 1.25rem; border-block: 1px solid var(--rule); font-size: .95rem; line-height: 1.5; }
.flow-heading { display: grid; gap: .4rem; }
.flow-heading > strong { font-size: 1.15rem; }
.flow-heading > span { color: var(--muted); }
.flow-toolbar { margin-block: .5rem; }
.flow-os { display: flex; flex-wrap: wrap; gap: .75rem; }
.project-flow button { min-width: 44px; min-height: 44px; padding: .5rem 0; border: 0; background: transparent; color: var(--muted); font-size: inherit; cursor: pointer; }
.flow-os button { font-family: var(--mono); font-size: .85rem; }
.flow-os button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.project-flow button:hover { color: var(--ink); }
.post-content .flow-prerequisite { margin: .75rem 0; color: var(--muted); }
.flow-prerequisite code { margin-right: .5rem; }
/* The steps are the route map's corridors (see .route-map in style.css), each
   a button filling its corridor label. */
.project-flow .route-corridor button { width: 100%; height: 100%; min-height: 0; padding: 0; text-align: left; font-family: inherit; font-size: inherit; color: var(--muted); }
.project-flow .route-corridor button[aria-current="step"] { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.project-flow[data-os="ubuntu"] [data-when="windows"],
.project-flow[data-os="windows"] [data-when="ubuntu"] { display: none; }
.flow-detail { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin-top: .5rem; }
.flow-detail-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.flow-step-label { font-family: var(--mono); font-size: .85rem; color: var(--faint); }
.post-content .flow-detail p { margin: .5rem 0; }
.flow-detail > a { display: inline-flex; align-items: center; min-height: 44px; }
.flow-network { margin-top: .75rem; color: var(--muted); }
.flow-network-path { font-family: var(--mono); font-size: .85rem; overflow-wrap: anywhere; }
.flow-network-note { display: block; margin-top: .5rem; }
.post-content .flow-source { margin: 1.25rem 0 0; color: var(--muted); font-size: .85rem; }
.post-content .flow-fallback { margin: .75rem 0 0; }