/* Shared components for the four layer prototypes. Studio v2 tokens only (captured app.css);
   more air and fewer borders than the swimlane round. One mark per meaning:
   ring / dot = how much we know · blue = something an agent could do · team colour = which team. */
.work{padding:8px 32px 32px}
.ph h1{font-size:22px}
.lede{color:var(--muted-foreground-100);font-size:14px;margin:4px 0 0}
.dring{flex:none;display:block}
.sdot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;box-sizing:border-box}
.sdot.known{background:var(--foreground-80)}
.sdot.partial{background:linear-gradient(90deg,var(--foreground-80) 50%,transparent 50%);border:1.5px solid var(--foreground-80)}
.sdot.gap{border:1.5px dashed var(--muted-foreground-100)}
.tdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.atag{display:inline-flex;align-items:center;gap:5px;color:#9dbcff;font-size:12px;white-space:nowrap}
.kicker{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground-100);font-weight:600}
.soft{border-radius:16px;background:var(--card-100,#0c1222);border:1px solid var(--muted-30)}
.click{cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.click:hover{border-color:var(--muted-foreground-100);background:var(--muted-20)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12px;color:var(--muted-foreground-100);background:var(--muted-20);white-space:nowrap}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground-100);font-size:13px;border:0;background:transparent;padding:4px 0}
.back:hover{color:var(--foreground-100)}
.legend-min{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted-foreground-100);align-items:center}
.legend-min span{display:inline-flex;gap:6px;align-items:center}
.hn{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;background:var(--muted-40);color:var(--foreground-100);flex:none}
.hn.gap{background:transparent;border:1.5px dashed var(--muted-foreground-100)}
.hn.partial{background:linear-gradient(90deg,var(--muted-100) 50%,transparent 50%);border:1.5px solid var(--muted-100)}

/* Step detail: identical in every prototype. */
.sd{display:grid;gap:12px}
.sd-h{display:flex;gap:10px;align-items:flex-start}
.sd-h .sdot{margin-top:5px}
.sd-h b{display:block;font-size:15px}
.sd-h small{color:var(--muted-foreground-100);font-size:12.5px}
.sd blockquote{margin:0;border-left:2px solid var(--muted-100);padding:2px 0 2px 12px;font-size:13.5px;line-height:1.5}
.sd blockquote small{display:block;color:var(--muted-foreground-100);font-size:12px;margin-top:4px}
.sd-empty{margin:0;font-size:13px}
.ask{border-radius:12px;background:var(--muted-20);padding:10px 12px;display:grid;gap:3px;font-size:13.5px}
.ask span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--warning-100);font-weight:600}
.ask small{color:var(--muted-foreground-100);font-size:12px}
.aopp{display:flex;gap:10px;align-items:flex-start;border-radius:12px;background:var(--primary-10);padding:10px 12px;color:#9dbcff}
.aopp b{display:block;font-size:13px;font-weight:600}
.aopp small{color:var(--muted-foreground-100);font-size:12px}
.sd-a{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (max-width:640px){.work{padding:6px 14px 20px}}