/* Accounts feed a shared business record; each authorized AI uses that context. */
.context-flow { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.95fr); gap:clamp(22px,2.1vw,42px); align-items:center; min-height:380px; isolation:isolate; }
.context-column-label { font-size:13px; color:#687083; margin-bottom:15px; }
.context-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; }
.context-wires path[data-context-wire] { fill:none; stroke:#d9dff4; stroke-width:1.5; }
.context-wires path.is-active { stroke:#6976ff; marker-end:url(#context-arrow); }
.context-packet { fill:var(--primer-blue); opacity:0; }
.context-account { display:flex; align-items:center; gap:10px; padding:14px 12px; margin-top:10px; border:1px solid #e2e6ef; border-radius:10px; background:#fff; }
.context-account strong { display:block; font-size:15px; font-weight:600; }
.context-account div>span { display:block; margin-top:5px; font-size:12px; line-height:1.5; color:#6a7282; }
.context-provider { width:28px; height:32px; flex-shrink:0; display:grid; place-items:center; }
.context-provider svg { width:24px; height:24px; }
.context-provider--shopify { color:#66845b; }
.context-provider--meta { color:#5376b3; }
.context-provider--gmail { color:#b36f5b; }
.context-hub { perspective:650px; }
.context-hub__face { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:200px; padding:30px 12px; border:1px solid #7b84ff; border-radius:20px; background:linear-gradient(135deg,#5260ff,#3445ff 55%,#2838df); box-shadow:inset 0 1px 0 #ffffff70,inset 0 -2px 0 #1e2dc4,4px 3px 0 #202fb5,7px 6px 0 #c9cfff,0 18px 38px #3445ff1a; transform:rotateY(-8deg) rotateX(5deg); text-align:center; }
.context-hub__face::before { content:""; position:absolute; inset:5px; border:1px solid #ffffff20; border-radius:15px; pointer-events:none; }
.context-hub img { width:100%; max-width:128px; height:auto; filter:brightness(0) invert(1); }
.context-hub p { margin-top:20px; color:white; font-size:14px; line-height:1.5; }
.context-hub__face>span { margin-top:10px; color:#e3e7ff; font-size:12px; line-height:1.6; }
.context-client { display:grid; grid-template-columns:26px 1fr; column-gap:8px; row-gap:12px; align-items:center; padding:18px 12px; margin-top:14px; border:1px solid #e2e6ef; border-radius:10px; background:#fff; text-align:left; width:100%; transition:background-color .2s,border-color .2s; }
.context-client img { width:26px; height:26px; }
.context-client strong { font-size:15px; font-weight:600; }
.context-client>span { grid-column:1 / -1; color:#758095; font-size:12px; line-height:1.5; }
.context-client.is-selected { background:#f6f7ff; border-color:#8b96ff; }
.context-client.is-selected>span { color:#3445ff; }
.context-client:hover { border-color:#8b96ff; }
.context-flow__hint { margin:12px auto 0; max-width:440px; text-align:center; color:var(--primer-muted); font-size:12px; line-height:1.7; }
.brief-memory { display:flex; gap:10px; margin-top:20px; padding:14px 16px; background:#ecefff; border-radius:8px; }
.brief-memory>span { color:var(--primer-blue); padding-top:2px; }
.brief-memory strong { display:block; font-size:13px; line-height:1.5; font-weight:600; }
.brief-memory p>span { display:block; margin-top:4px; font-size:12px; line-height:1.6; color:#626a7d; }
@media(min-width:1700px) {
 .context-flow { min-height:450px; gap:38px; }
 .context-hub__face { min-height:230px; }
 .context-account { padding:20px 16px; gap:14px; }
 .context-account strong,.context-client strong { font-size:16px; }
 .context-account div>span,.context-client>span,.context-hub__face>span { font-size:12px; }
 .context-hub p { font-size:15px; }
 .context-client { padding:24px 16px; column-gap:12px; }
 .context-column-label { font-size:13px; }
}
@media(min-width:1100px) and (max-width:1299px) {
 .context-flow { gap:20px; }
 .context-account { padding:14px 9px; gap:6px; }
 .context-provider { width:21px; }
 .context-provider svg { width:20px; }
 .context-account strong,.context-client strong { font-size:12px; }
 .context-client { grid-template-columns:22px 1fr; gap:10px 5px; padding:18px 9px; }
 .context-client img { width:22px; height:22px; }
 .context-hub p { font-size:12px; }
 .context-hub__face>span { font-size:11px; }
}
@media(max-width:575px) {
 .context-flow { grid-template-columns:1fr; gap:40px; min-height:0; }
 .context-accounts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .context-column-label { grid-column:1 / -1; margin:0 0 3px; text-align:center; font-size:12px; }
 .context-account { display:flex; flex-direction:column; gap:7px; padding:12px 5px; margin:0; text-align:center; }
 .context-account strong { font-size:12px; }
 .context-account div>span { font-size:9px; }
 .context-hub { width:220px; justify-self:center; }
 .context-hub__face { min-height:176px; padding:24px 16px; }
 .context-hub p { margin-top:15px; }
 .context-clients { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 .context-client { margin:0; padding:15px; }
 .context-client>span { font-size:11px; }
 .context-flow__hint { margin-top:24px; max-width:300px; }
}
@media(prefers-reduced-motion:reduce) { .context-client { transition:none; } }