@layer modules {
  /* Flows index */
  /* What the team may have, above the shelf it applies to, with the ask set apart from the count. */
  .shelf-allowance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem; margin: 0 0 1.6rem; }
  .shelf-allowance a { text-underline-offset: 3px; }
  .hero { padding: .4rem 0 3.2rem; }
  .shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); }
  .shelf > li { position: relative; }
  /* Over the card's corner rather than inside its link; out of the way until the card is pointed at, focused or touched. */
  .flow-card-menu { position: absolute; right: .8rem; top: .8rem; }
  .flow-card-menu-button { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .12s ease; }
  .flow-card-menu-button:hover { border-color: var(--ink-3); color: var(--ink); }
  .flow-card-menu-button .icon { width: 1.8rem; height: 1.8rem; }
  .shelf > li:hover .flow-card-menu-button, .shelf > li:focus-within .flow-card-menu-button, .flow-card-menu[open] .flow-card-menu-button { opacity: 1; }
  .flow-card-menu-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (hover: none) { .flow-card-menu-button { opacity: 1; } }
  .flow-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
  .flow-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-float); }
  /* What a caller sees first when they dial in, set like the phone screen. */
  .flow-card-preview { display: grid; align-content: start; gap: .7rem; min-height: 15rem; margin: .8rem .8rem 0; padding: 1.4rem 1.6rem; border: 1px solid var(--screen-line); border-radius: var(--r-card); background: var(--screen-bg); color: var(--screen-ink); font-family: var(--mono); font-size: 1.25rem; line-height: 1.5; }
  .flow-card:hover .flow-card-preview { background: var(--screen-hover); }
  .flow-card-copy { white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .flow-card-copy.is-empty { color: var(--ink-3); }
  .flow-card-options { display: grid; gap: .3rem; padding-top: .7rem; border-top: 1px dashed var(--screen-rule); }
  .flow-card-options > span { display: flex; align-items: center; gap: .7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .flow-card-more { color: var(--screen-muted); padding-left: .2rem; }
  .flow-card-body { display: grid; gap: 1rem; padding: 1.4rem 1.8rem 1.8rem; }
  .flow-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .flow-card-name { font-size: 1.9rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
  /* The index toolbar: title and count, search, filters and sort on one line that wraps when narrow. */
  .flows-title { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: 3.2rem; font-weight: 700; font-stretch: 92%; letter-spacing: -.025em; line-height: 1.1; }
  .flows-title .count { font-size: 1.3rem; }
  body:not(:has(.flows)) .flows-title { margin-bottom: 2.4rem; }
  .flows-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 2.4rem; margin-bottom: 2.4rem; }
  .flows-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
  .flows-search { display: flex; align-items: center; gap: .8rem; height: 3.8rem; padding: 0 .8rem 0 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); cursor: text; }
  .flows-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .18); }
  .flows-search .icon { width: 1.6rem; height: 1.6rem; }
  .flows-search .search-field { width: 20rem; font-size: 1.45rem; }
  .flows-search:focus-within kbd { visibility: hidden; }
  .flows-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
  .flows-sort { display: flex; align-items: center; gap: .8rem; color: var(--ink-2); font-size: 1.35rem; font-weight: 550; }
  .flows-sort .field { width: auto; min-height: 3.4rem; font-size: 1.4rem; }
  .flows-none { display: grid; justify-items: start; gap: 1.2rem; padding: 4rem 0; color: var(--ink-2); }
  .flows-none[hidden] { display: none; }
  .flows-none p { margin: 0; }
  @media (max-width: 600px) { .flows-tools, .flows-search { width: 100%; } .flows-search .search-field { flex: 1; width: auto; } }
  .flow-card-states { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: 1.3rem; }
  .flow-card-state { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink-2); font-weight: 550; }
  .flow-card-state::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
  .flow-card-state.is-live { color: var(--ok-ink); }
  .flow-card-state.is-live::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
  .flow-card-state.is-staging::before { background: var(--router); box-shadow: none; }
  .flow-card-draft { color: var(--ink-3); }
  .flow-card-count { display: flex; align-items: baseline; gap: .4rem 1.4rem; flex-wrap: wrap; color: var(--ink-2); font-size: 1.3rem; }
  .flow-card-count strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
  .flow-card-count code { font-size: 1.2rem; }
  /* First run: the two ways to start, and the path a flow takes to callers. */
  .first-run { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.4rem 4.8rem; align-items: start; max-width: 112rem; padding: 3.2rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .first-run-title { margin: 0 0 .6rem; font-size: 2.4rem; font-weight: 700; font-stretch: 92%; letter-spacing: -.02em; line-height: 1.15; }
  .first-run-options { display: grid; gap: 1rem; }
  .first-run-option { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--bg); color: var(--ink); text-decoration: none; transition: border-color .12s ease, background-color .12s ease; }
  .first-run-option:hover { border-color: var(--ink-3); background: var(--surface-2); }
  .first-run-option > span:last-child { display: grid; gap: .2rem; }
  .first-run-option strong { font-size: 1.55rem; font-weight: 650; }
  .first-run-option span span { color: var(--ink-2); font-size: 1.35rem; }
  .first-run-icon { display: grid; place-items: center; flex: none; width: 4rem; height: 4rem; border-radius: var(--r-card); background: var(--surface-2); color: var(--ink); }
  .first-run-icon .icon { width: 2rem; height: 2rem; }
  .first-run-option.is-primary .first-run-icon { background: var(--primary); color: var(--on-primary); }
  .first-run-steps { display: grid; gap: 1.8rem; margin: 0; padding: .4rem 0 0; list-style: none; counter-reset: step; }
  .first-run-step { position: relative; display: grid; gap: .2rem; padding-left: 4.4rem; counter-increment: step; }
  .first-run-step::before { content: counter(step); position: absolute; left: 0; top: -.2rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--kind-soft); color: var(--kind-ink); font-size: 1.3rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--kind); }
  .first-run-step:not(:last-child)::after { content: ""; position: absolute; left: 1.35rem; top: 3.2rem; bottom: -1.6rem; width: 1px; background: var(--line-strong); }
  .first-run-step.is-menu { --kind: var(--menu); --kind-soft: var(--menu-soft); --kind-ink: var(--menu-ink); }
  .first-run-step.is-input { --kind: var(--input); --kind-soft: var(--input-soft); --kind-ink: var(--input-ink); }
  .first-run-step.is-end { --kind: var(--end); --kind-soft: var(--end-soft); --kind-ink: var(--ok-ink); }
  .first-run-step strong { font-size: 1.5rem; font-weight: 650; }
  .first-run-step span { color: var(--ink-2); font-size: 1.4rem; }
  @media (max-width: 879px) { .first-run { grid-template-columns: minmax(0, 1fr); padding: 2.4rem 2rem; } }
  /* The templates are taller than the window, so Create follows the page down rather than waiting at the end of it. */
  .new-flow .actions { position: sticky; bottom: 0; z-index: 5; margin: 1.6rem -2.4rem 0; padding: 1.2rem 2.4rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); }
  @media (max-width: 600px) { .new-flow .actions { margin-inline: -1.6rem; padding-inline: 1.6rem; } }
  .new-flow-import { margin-top: 2rem; }
  /* Getting started: three steps above the shelf, ticked from what the team has really done. */
  .getting-started { display: grid; gap: 1.2rem; margin-bottom: 2.4rem; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .getting-started[hidden] { display: none; }
  .getting-started-head { display: flex; align-items: center; gap: 1rem; }
  .getting-started-head .btn { margin-left: auto; }
  .getting-started-title { margin: 0; font-size: 1.6rem; font-weight: 650; }
  .getting-started-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.2rem 2.4rem; margin: 0; padding: 0; list-style: none; }
  .getting-started-step { display: flex; align-items: flex-start; gap: 1rem; }
  .getting-started-step > span:nth-child(2) { display: grid; gap: .2rem; }
  .getting-started-step strong { font-size: 1.45rem; font-weight: 650; }
  .getting-started-step span span { color: var(--ink-2); font-size: 1.35rem; }
  .getting-started-tick { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; margin-top: .1rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ok-ink); }
  .getting-started-tick .icon { width: 2.2rem; height: 2.2rem; }
  .getting-started-step.is-done .getting-started-tick { box-shadow: none; }
  .getting-started-step.is-done strong { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
  /* New flow: templates set like flow cards, picked like radios. */
  .template-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
  .template-picker legend { margin-bottom: .8rem; }
  .template-cards { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); max-width: 112rem; }
  .template-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
  .template-card:hover { border-color: var(--line-strong); }
  .template-card:has(:checked) { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .18); }
  .template-card:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .template-card input[type=radio] { position: absolute; top: 1.6rem; right: 1.6rem; margin: 0; accent-color: var(--primary); }
  .template-card .flow-card-preview { min-height: 13rem; padding-right: 4rem; }
  .template-card-body { display: grid; align-content: start; gap: .8rem; padding: 1.4rem 1.8rem 1.8rem; }
  .template-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .template-card-name { font-size: 1.7rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
  .template-card-summary { color: var(--ink-2); font-size: 1.4rem; }
  .flow-card.is-new { align-items: flex-start; justify-content: center; gap: 1rem; padding: 2.4rem; border-style: dashed; border-color: var(--line-strong); background: transparent; }
  .flow-card.is-new:hover { background: var(--surface); box-shadow: none; }
  .flow-card-plus { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--r-card); background: var(--primary); color: var(--on-primary); }
  .flow-card-plus .icon { width: 2rem; height: 2rem; }
  .bricks { display: flex; gap: 2px; height: .8rem; overflow: hidden; border-radius: 999px; }
  .bricks-part { min-width: .6rem; }
  .bricks-part.is-menu { background: var(--menu); }
  .bricks-part.is-input { background: var(--input); }
  .bricks-part.is-router { background: var(--router); }
  .bricks-part.is-end { background: var(--end); }
  .bricks-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: 1.25rem; color: var(--ink-2); }
  .bricks-legend li::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .5rem; border-radius: 50%; vertical-align: .05em; }
  .bricks-legend .is-menu::before { background: var(--menu); }
  .bricks-legend .is-input::before { background: var(--input); }
  .bricks-legend .is-router::before { background: var(--router); }
  .bricks-legend .is-end::before { background: var(--end); }
}