/* GENERATED from projects/public-content/ts/optionos-site.contract.stream-layout.ts.
   Layout identity -> shared metrics -> shell/rail projections -> browser geometry judge. */
.stream-wrap {
  --stream-shell-max-inline: 1320px;
  --stream-shell-inline-padding: 20px;
  --stream-shell-rail-inline: 230px;
  --stream-shell-column-gap: 40px;
  --stream-shell-read-inline: 736px;
  --stream-shell-topbar-top: 12px;
  --stream-shell-topbar-block: 56px;
  --stream-shell-sticky-gap: 16px;
  --stream-shell-sticky-top: 84px;
  --stream-shell-sticky-bottom-gap: 18px;
  max-inline-size: var(--stream-shell-max-inline);
  margin-inline: auto;
  padding: 18px var(--stream-shell-inline-padding) 96px;
}

.stream-topbar {
  position: sticky;
  inset-block-start: var(--stream-shell-topbar-top);
  min-block-size: var(--stream-shell-topbar-block);
  z-index: 40;
}

.stream-shell-body {
  display: grid;
  grid-template-columns: var(--stream-shell-rail-inline) minmax(0, 1fr);
  gap: var(--stream-shell-column-gap);
  align-items: start;
}
.stream-shell-body > * { min-inline-size: 0; }

.stream-sidebar,
.stream-content-rail {
  position: sticky;
  inset-block-start: var(--stream-shell-sticky-top);
  max-block-size: calc(100dvh - var(--stream-shell-sticky-top) - var(--stream-shell-sticky-bottom-gap));
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.stream-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stream-shell-rail-inline);
  gap: var(--stream-shell-column-gap);
  align-items: start;
}
.stream-content-main { order: 1; min-inline-size: 0; }
.stream-content-rail { order: 2; min-inline-size: 0; }
.stream-content-layout-solo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
  .stream-shell-body,
  .stream-content-layout,
  .stream-content-layout-solo { grid-template-columns: minmax(0, 1fr); }
  .stream-sidebar { display: none; }
  .stream-content-rail {
    order: 0;
    position: static;
    max-block-size: none;
    overflow: visible;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
}

@media (max-width: 720px) {
  .stream-wrap { padding: 16px 16px 72px; }
}