/* ==========================================================
   STAGE = the client. Reads client tokens only (--c-*), plus
   --stage-bg / --stage-fg, which are set from client tokens.
   ========================================================== */
/* --fl: the frame's left margin. The edge tab sits on the rail edge and reaches 22px (× --ui) into the
   stage, so the work starts after the tab plus 28px of air, never closer than the 33px frame */
.stage{ --fl:max(33px, calc(22px * var(--ui, 1) + 28px));
  position:absolute; top:0; bottom:0; left:var(--stage-left, var(--rail-w,311px)); right:0; z-index:1;
  background:var(--stage-bg); color:var(--stage-fg); font-family:var(--c-body);
  transition:left .7s var(--ease), background-color .45s var(--ease), color .45s var(--ease); }
.module{ position:absolute; inset:0; overflow:clip; transition:opacity .3s var(--ease); }

/* target area: geometry comes from the module (see src/stage/modules) */
.target{ position:absolute; left:var(--tx); top:var(--ty); width:var(--tw); height:var(--th);
  display:grid; place-items:center; transition:left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease); }
.target .mark{ height:calc(var(--th) * .58); width:calc(var(--th) * .58); display:grid; place-items:center; transition:height .7s var(--ease), width .7s var(--ease); }
.target .mark svg{ width:100%; height:100%; overflow:visible; display:block; }
.target .mark svg path, .target .mark svg circle{ fill:currentColor; transition:fill .45s var(--ease); }

/* logo art rendered from tokens fills the target area (the logo sizes itself by container units) */
.target-logo > .lg{ width:100%; height:100%; }
.target-logo > .lg-wordmark .lg-wm{ font-size:min(15cqw, 30cqh); }
.sm-photo{ position:absolute; inset:0; }
.sm-photo + .target{ color:var(--c-on-photo); }

/* switcher styles: styles/switcher.css */

/* register placeholder: any asset with file:null renders at its exact ratio */
.placeholder{ display:grid; place-items:center; align-content:center; gap:4px; border-radius:18px; text-align:center;
  background:color-mix(in srgb, currentColor 8%, transparent); color:inherit; font-family:var(--c-body); }
.placeholder b{ font-size:13px; font-weight:600; letter-spacing:.01em; }
.placeholder small{ font-size:11px; opacity:.65; }