/* Streamify — the split pane.
 *
 * A primary column with an aside, collapsing to one column when the *host* is
 * narrow rather than when the viewport is: the same pane sits inside the rail
 * layout on desktop and full-bleed on mobile, and only the host knows which.
 *
 * Loaded after app.css and NOT processed by Tailwind.
 */

.sf-split-host { container-type: inline-size; }

.sf-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@container (min-width: 860px) {
  .sf-split { grid-template-columns: minmax(420px, 1fr) minmax(240px, 300px); }
}

@supports not (container-type: inline-size) {
  @media (min-width: 1180px) {
    .sf-split { grid-template-columns: minmax(420px, 1fr) minmax(240px, 300px); }
  }
}