/* Workspace shell layout. Desktop-first: the product is used on 1440+ screens.
   Below 1180 the inspector collapses; below 900 the sidebar becomes the rail. */
html, body { height: 100% }
body { margin: 0; background: var(--bg-base); overflow: hidden }
.ws { display: flex; height: 100vh; min-height: 0 }
.ws-main { flex: 1; min-width: 0; display: flex; flex-direction: column }
.ws-scroll { flex: 1; min-height: 0; overflow-y: auto }
.ws-pad { padding: 22px 26px 40px }
.ws-subbar { display: flex; align-items: center; gap: 14px; height: var(--subbar-h); padding: 0 26px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); flex: none; white-space: nowrap }
/* In a subbar, the metadata group shrinks and ellipsises; the action group never does. */
.ws-subbar-meta { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden }
.ws-subbar-meta > .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.ws-subbar-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto }
.ws-cols-3 { display: grid; grid-template-columns: 272px minmax(0, 1fr) var(--inspector-w); height: 100%; min-height: 0 }
.ws-cols-3 > * { min-width: 0; min-height: 0 }
.ws-cols-3--flows { grid-template-columns: 236px minmax(0, 1fr) var(--inspector-w) }
.ws-cols-3--doc { grid-template-columns: 240px minmax(0, 1fr) var(--inspector-w) }
.ws-col { border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; min-height: 0; background: var(--surface-1) }
.ws-col--right { border-right: 0; border-left: 1px solid var(--border-subtle) }
.ws-col-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px }
.ws-grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start }
.ws-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.ws-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.ws-stack { display: flex; flex-direction: column; gap: 20px }
.ws-stack-sm { display: flex; flex-direction: column; gap: 12px }
.ws-row { display: flex; align-items: center; gap: 10px }
.ws-h1 { font: var(--type-h2); letter-spacing: var(--tracking-tighter) }
.ws-list { list-style: none; margin: 0; padding: 0 }

/* the ⌘K invitation bar on Home — the product's front door */
.ws-ask { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 16px; height: 52px; border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-default); color: var(--text-muted); font: var(--type-body-lg); cursor: text; transition: var(--transition-control) }
.ws-ask:hover { border-color: var(--border-accent); background: var(--surface-1) }

/* workflow canvas */
.wf-canvas { position: relative; height: 100%; min-height: 0; overflow: auto; background-color: var(--bg-void); background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px }
.wf-inner { position: relative; width: 1120px; height: 560px }

@media (max-width: 1180px) {
  .ws-cols-3 { grid-template-columns: 248px minmax(0, 1fr) }
  .ws-cols-3--flows { grid-template-columns: 236px minmax(0, 1fr) }
  .ws-cols-3--doc { grid-template-columns: 240px minmax(0, 1fr) }
  .ws-col--right { display: none }
  .ws-grid-2 { grid-template-columns: minmax(0, 1fr) }
  .ws-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .ws-cols-3, .ws-cols-3--flows, .ws-cols-3--doc { grid-template-columns: minmax(0, 1fr) }
  .ws-cols-3 > .ws-col:first-child { display: none }
  .ws-grid-3 { grid-template-columns: minmax(0, 1fr) }
}