/* Focused DOM crops of the app, with fictional projects and identities.
   App chrome and account menus inherit the same snapshot as the animated demo. */
.feature.feature-multi { display: block; }
.multi-intro { text-align: center; }
.multi-intro .multi-heading { margin: 0; font-size: clamp(1.8rem, 3.3vw, 2.8rem); }
.multi-heading span { display: block; }
.multi-heading span:last-child { color: var(--accent); }
.feature-icons { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* Wide screens: the heading sits in the middle with the examples around it. The grid breaks out of
   the 1280px section to the demo window's width (1560px) so the side columns have room.
   Each account example shares a row with the example beside it, and the crops stretch so both columns end level. */
.multi-showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 36px 48px; align-items: stretch;
  grid-template-areas: "projects heading source" "agents heading provider";
  width: min(1560px, calc(100vw - 64px)); margin-left: calc(50% - min(780px, 50vw - 32px));
}
.multi-intro { grid-area: heading; align-self: center; }
.scene-projects { grid-area: projects; }
.scene-agents { grid-area: agents; }
.account-sections { display: contents; }
.scene-source-accounts { grid-area: source; }
.scene-provider-accounts { grid-area: provider; }
.multi-scene { display: flex; flex-direction: column; min-width: 0; }
.multi-scene > .feature-crop { flex: 1 1 auto; }
.demo.feature-crop.project-crop { display: flex; flex-direction: column; }
.project-crop .project-explorer { flex: 1 1 auto; }
.demo.feature-crop.provider-accounts-crop { display: flex; flex-direction: column; justify-content: center; }
.multi-scene > h3 { font-size: 1.1rem; line-height: 1.4; margin-bottom: 14px; }
/* Narrower: the heading goes back on top. */
@media (max-width: 1300px) {
  .multi-showcase {
    grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.5fr); gap: 24px; width: auto; max-width: 1080px; margin: 0 auto;
    grid-template-areas: "heading heading" "projects projects" "agents accounts"; align-items: start;
  }
  .multi-intro { margin-bottom: 12px; }
  .account-sections { display: grid; gap: 32px; min-width: 0; grid-area: accounts; }
  .scene-source-accounts, .scene-provider-accounts { grid-area: auto; }
}
.demo.feature-crop { width: 100%; height: auto; display: block; margin: 0; grid-template-rows: none; box-shadow: 0 8px 24px #0003; }
.feature-crop button { font-family: inherit; }
.feature-crop [hidden] { display: none !important; }
.feature-crop .dt-projects { min-height: 42px; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.feature-crop .dt-tab { position: relative; flex: none; border: 0; background: transparent; font: inherit; cursor: pointer; }
.feature-crop .dt-tab.active { background: var(--bar); }
.feature-crop .dt-tab:focus-visible { outline-offset: -5px; }
.feature-crop .dt-new { cursor: default; }
/* Room for the longest tree, so switching projects never changes the crop's height. */
.project-explorer .dx-tree { min-height: 264px; }
/* demo.css hides the window's explorer below 1240px; this crop is only the explorer, so it stays. */
.demo.project-crop .project-explorer { display: flex; }
.demo.feature-crop .demo-rail { display: block; padding: 4px 0 12px; }
.rail-crop .demo-group { padding: 2px 0; }
.rail-crop .demo-group-name { margin: 12px 0 6px; }
.rail-crop .demo-pill { gap: 10px; min-height: 54px; padding-left: 14px; padding-right: 14px; }
.rail-task { display: grid; gap: 7px; min-width: 0; flex: 1; }
.rail-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; color: var(--muted); font-size: 10px; font-weight: 400; }
.rail-status.working { color: var(--c-teal); }
.rail-status.ready { color: var(--c-green); }
.rail-status.approval { color: var(--c-amber); }
.accounts-crop .account-example { padding: 14px; }
.provider-accounts-crop .account-example { background: var(--bar); }
.accounts-crop .demo-sc { display: block; padding: 0; }
.account-example h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text); font-size: 13px; font-weight: 600; }
.accounts-crop .sc-strip { position: relative; margin-bottom: 0; }
.accounts-crop .sc-accountbar-top { width: 100%; }
.accounts-crop .sc-accts { width: 100%; }
.source-repositories { padding: 0 2px; }
.source-repositories .sc-repo-row:last-child { border-bottom: 0; }
.provider-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.provider-account { min-width: 0; }
.provider-account-name { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 8px; font-size: 13px; }
.provider-account-name img { display: block; }
.feature-crop .account-pop { position: relative; inset: auto; z-index: 1; width: 100%; max-width: none; min-width: 0; margin: 0; opacity: 1; transform: none; }
.feature-crop .account-pop-row { padding: 8px 6px; }
.feature-crop .provider-login { display: grid; gap: 4px; white-space: normal; overflow: visible; text-overflow: clip; }
.provider-login-email { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .multi-showcase { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr); gap: 24px; }
  .provider-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .multi-showcase { grid-template-columns: minmax(0, 1fr); gap: 24px; grid-template-areas: "heading" "agents" "projects" "accounts"; }
  .feature-crop .dt-tab { padding: 0 9px; font-size: 11px; gap: 5px; }
  .feature-crop .dt-tab .ic { width: 12px; height: 12px; }
  .accounts-crop .account-example { padding: 14px; }
  .provider-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .provider-account-name { gap: 6px; font-size: 12px; }
}
@media (max-width: 480px) {
  .provider-account-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 359px) {
  .feature-crop .dt-tab { padding: 0 6px; font-size: 10px; }
}