/* Aperintelligence AI Academy: the sphere of project pictures (project-sphere.js),
   small in the discipline section of the home page and large at the top of
   /discipline. Loaded after site.css, whose tokens it uses, and after
   card-stack.css, whose play pill its button borrows. */

/* A page sets --sphere-max on .sphere-stage to size the sphere; the controls
   under it keep to the same width. The default is sized by the height of the
   screen as well as the column, so the whole sphere and its controls fit in
   the first view. */
.sphere-stage{width:100%;max-width:var(--sphere-max, min(600px, 64vh));min-width:0;margin-inline:auto;}
/* --sphere-accent is the outline colour the script draws with, the home headline's blue.
   pan-y leaves vertical scrolling to the browser, so a sideways swipe can roll the sphere. */
.project-sphere{display:block;width:100%;aspect-ratio:1;cursor:grab;touch-action:pan-y;--sphere-accent:#7FB2FF;}
.project-sphere.is-dragging{cursor:grabbing;}
.sphere-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;}
/* The name of the picture in front. min-height holds the row steady while the name is empty. */
.sphere-label{min-height:1.4em;font-size:var(--sphere-label-size, clamp(15px, 0.5vw + 11px, 19px));line-height:1.4;color:var(--text);}