/* Custom Agents (B7, round 14 third pass; the painting rules by B1/P1 kept). Prefix ca-. Type roles only, tokens only. */

/* ---- Why Atlas (198, 233): the puzzle painting in layers; the piece seats once; pinned, the scroll zooms into the maroon piece until
   the screen is maroon, then the heading and its line rise on it ---- */
.ca-pzs{--maroon:var(--dusk);padding:0} /* L2 r14f (client 246): the piece and the screen take the footer colour (piece recoloured in code: p_agents_puzzle_piece_dusk.webp) */
.ca-pin{position:relative;height:300vh}
.ca-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0a0a0a}
.ca-pz{--s:1;position:absolute;left:50%;top:50%;width:max(100vw,150svh);aspect-ratio:3 / 2;transform:translate(-50%,-50%) scale(var(--s));transform-origin:67.6% 46.1%;will-change:transform}
.ca-pz img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ca-pz-piece{transform:translate(-2.6%,-4.2%) scale(1.14);transform-origin:66.5% 25.4%;filter:drop-shadow(14px 18px 16px rgba(20,25,20,.45));transition:transform 1s var(--spring),filter 1s var(--ease)}
.ca-pzs.seat .ca-pz-piece{transform:none;filter:drop-shadow(0 0 0 rgba(20,25,20,0))}
/* the end of the zoom stays sharp: the painted piece hands over to its own drawn outline (traced from it), redrawn at every scale */
.ca-pz{opacity:1}
.ca-vec{display:none}
.ca-vec path{fill:var(--maroon)}
.ca-maroon{position:absolute;inset:0;background:#0a0a0a;opacity:var(--mo,0);pointer-events:none} /* r16 283: the picture darkens as it zooms */
.ca-pz-txt{position:absolute;left:var(--rx,50%);top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - var(--m) * 2));text-align:center}
.ca-pz-txt .eyebrow{margin-bottom:20px;color:rgba(255,255,255,.72)}
.ca-pz-txt .eyebrow,.ca-p,.ca-lede{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .7s var(--spring)}
.ca-head{margin:0;color:#fff}
.ca-p{display:block}
.ca-lede{margin:26px auto 0;color:rgba(255,255,255,.84);max-width:31em}
.ca-pzs .on{opacity:1;transform:none}

/* ---- Path (final pass): the puzzle as a flat line drawing on black; three states of one board, ending seated and checked ---- */
.ca-pm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.ca-steps{grid-column:1 / 5}
.ca-steps li{padding:20px 0 20px 22px;border-left:1px solid var(--line2);transition:border-color var(--t1) var(--ease)}
.ca-steps li.on{border-left-color:#fff}
.ca-steps h3 button{all:unset;cursor:pointer;color:var(--fg2);transition:color var(--t1) var(--ease)}
.ca-steps li.on h3 button{color:#fff}
.ca-steps h3 button:focus-visible{box-shadow:0 2px 0 #fff}
.ca-steps p{color:var(--fg2);margin-top:8px;max-width:26em}
.ca-board{grid-column:5 / 13;position:relative;margin:0;aspect-ratio:760 / 470}
.ca-board > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-pc{fill:rgba(255,255,255,.025);stroke:rgba(245,245,243,.42);stroke-width:1.2;transition:stroke var(--t2) var(--ease),fill var(--t2) var(--ease)}
.ca-pm[data-s="0"] .ca-pc--slot{stroke:var(--verm);fill:rgba(226,70,42,.07)}
.ca-slot{fill:none;stroke:rgba(245,245,243,.6);stroke-width:1.3;stroke-dasharray:5 5;transition:stroke var(--t2) var(--ease)}
.ca-pm[data-s="0"] .ca-slot{stroke:var(--verm)}
.ca-ag{transform:translate(420px,-20px);opacity:0;transition:transform var(--t2) var(--ease-io),opacity var(--t1) var(--ease)}
.ca-ag path{fill:var(--dusk);stroke:rgba(245,245,243,.92);stroke-width:1.4}
.ca-pm[data-s="1"] .ca-ag{opacity:1}
.ca-pm[data-s="2"] .ca-ag{opacity:1;transform:none}
.ca-ticks{opacity:0;transition:opacity var(--t1) var(--ease)}
.ca-ticks path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ca-pm[data-s="2"] .ca-ticks{opacity:1;transition-delay:var(--t2)}
.ca-bl{--ax:var(--x);--ay:var(--y);position:absolute;left:var(--ax);top:var(--ay);transform:translate(-50%,-50%);white-space:nowrap;padding:6px 10px;border-radius:8px;background:#141515;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:500 var(--s-small)/1.2 var(--f);color:var(--fg);opacity:0;transition:opacity var(--t1) var(--ease),left var(--t2) var(--ease-io),top var(--t2) var(--ease-io)}
.ca-pm[data-s="0"] .ca-bl--s0,.ca-pm[data-s="1"] .ca-bl--s1,.ca-pm[data-s="2"] .ca-bl--s2{opacity:1}
.ca-bl--tag{transform:translate(0,-50%);background:none;box-shadow:none;padding:0;color:var(--fg2)}
.ca-bl--ag{--ax:84.21%;--ay:56%}
.ca-pm[data-s="2"] .ca-bl--ag{--ax:28.95%;--ay:64.26%}
.ca-bl--out{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;background:#f5f5f3;color:var(--ink);box-shadow:none}
.ca-bl--out svg{width:18px;height:18px;fill:none;stroke:var(--verm);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ca-pm[data-s="2"] .ca-bl--out{transition-delay:var(--t2)}

/* ---- Benefits: three kinds of interface, each heading loud above its picture, each ending on its outcome ---- */
.ca-b{position:relative}
.ca-bh{padding-top:26px;border-top:1px solid var(--line2)}
.ca-b--flow{margin-top:clamp(8px,2vw,32px)}
.ca-bh h3{font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:#fff}
.ca-bh p{color:var(--fg2);margin-top:10px;max-width:30em}
.ca-pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(96px,10vw,152px)}
.ca-b--code{grid-column:1 / 8}
.ca-b--eval{grid-column:8 / 13;padding-left:clamp(0px,2vw,32px);display:flex;flex-direction:column}
.ca-pair .ca-bh p{min-height:3.1em}
.ca-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 1 the workflow: ca-wf.css (r21) */

/* 2 your codebase: the agent written in; the engineers' cursor; the status bar ends on the connection */
.ca-code{margin:clamp(32px,3vw,44px) 0 0}
.ca-win{border-radius:16px;background:linear-gradient(180deg,#161717,#101111);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 40px 90px rgba(0,0,0,.45);overflow:hidden}
.ca-wbar{display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-bottom:1px solid var(--line)}
.ca-wbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.ca-wbar span{margin-left:14px;font:500 var(--s-small)/1 var(--f);color:var(--fg2)}
.ca-wmain{display:grid;grid-template-columns:1fr 64px;min-height:300px}
.ca-ed{min-width:0}
.ca-tabs{display:flex;height:40px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.ca-tab{display:flex;align-items:center;gap:8px;padding:0 18px;font:500 var(--s-small)/1 var(--f);color:var(--fg);background:rgba(255,255,255,.05);box-shadow:inset 0 -2px 0 var(--verm)}
.ca-tab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verm)}
.ca-lines{position:relative;padding:16px 0 22px}
.ca-fold,.ca-ln{display:flex;align-items:center;height:32px;padding-left:16px}
.ca-fold span{display:inline-grid;place-items:center;height:18px;padding:0 9px;margin-left:30px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--fg3);font:500 var(--s-small)/1 var(--f)}
.ca-ln{position:relative;font:400 var(--s-body)/1 var(--f);color:var(--fg);background:rgba(226,70,42,.07);clip-path:inset(0 100% 0 0);transition:clip-path .32s steps(14,end)}
.ca-ln::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--verm)}
.ca-ln b{width:30px;flex:none;font:500 var(--s-small)/1 var(--f);color:var(--verm)}
.ca-ln--k span{color:#fff;font-weight:500}
.ca-ln:not(.ca-ln--k) .ca-key,.ca-ln:not(.ca-ln--k) > .ca-val:first-of-type{margin-left:24px}
.ca-key{width:7.4em;flex:none;color:var(--fg2)}
.ca-val{color:var(--fg)}
.ca-ln.in{clip-path:inset(0 0 0 0)}
.ca-who{position:absolute;left:0;top:0;white-space:nowrap;padding:5px 9px;margin-left:8px;border-radius:0 6px 6px 0;background:var(--verm);color:#fff;font:500 var(--s-small)/1 var(--f);transform:translate(var(--cx,46px),var(--cy,40px));transition:transform .3s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.ca-who::before{content:"";position:absolute;right:100%;top:-4px;bottom:-4px;width:2px;margin-right:6px;background:var(--verm)}
.ca-code.in .ca-who{opacity:1}
.ca-mapw{position:relative;border-left:1px solid var(--line)}
.ca-mini{position:absolute;inset:0;display:block;width:100%;height:100%}
.ca-wstat{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-top:1px solid var(--line);font:500 var(--s-small)/1 var(--f);color:var(--fg2);transition:color .35s,background-color .35s}
.ca-wstat .ca-ic{width:18px;height:18px;opacity:.3;transition:opacity .35s}
.ca-wstat.in{color:#fff;background:rgba(255,255,255,.04)}
.ca-wstat.in .ca-ic{opacity:1}

/* 3 the sheet agreed with your team: criteria and guardrails, then the assessment, ending in a check */
.ca-eval{margin:clamp(32px,3vw,44px) 0 0;flex:1;display:flex;flex-direction:column}
.ca-sheet{border-radius:16px;background:#f5f5f3;color:var(--ink);padding:20px 24px 26px;box-shadow:0 40px 90px rgba(0,0,0,.45);flex:1;display:flex;flex-direction:column}
.ca-shd{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--iline);color:var(--ink2)}
.ca-team{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 9px;border-radius:999px;background:rgba(14,15,15,.06);font:500 var(--s-small)/1 var(--f);color:var(--ink)}
.ca-team svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ca-crit li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--iline);font:400 var(--s-body)/1.3 var(--f)}
.ca-box{width:24px;height:24px;flex:none;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(14,15,15,.35);display:grid;place-items:center;transition:background-color .25s var(--d),box-shadow .25s var(--d)}
.ca-box svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s var(--ease) calc(var(--d) + .1s)}
.ca-agr{margin-left:auto;font:500 var(--s-small)/1 var(--f);color:var(--ink2);opacity:0;transition:opacity .3s calc(var(--d) + .15s)}
.ca-eval.in .ca-box{background:var(--ink);box-shadow:none}
.ca-eval.in .ca-box svg{stroke-dashoffset:0}
.ca-eval.in .ca-agr{opacity:1}
.ca-assess{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px}
.ca-assess p{font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:var(--ink);max-width:14em}
.ca-assess p span:last-child{color:var(--ink2);transition:color .4s 1.1s}
.ca-eval.in .ca-assess p span:last-child{color:var(--ink)}
.ca-ring{width:64px;height:64px;flex:none}
.ca-ring svg{width:100%;height:100%;fill:none;transform:rotate(-90deg)}
.ca-ring-t{stroke:rgba(14,15,15,.12);stroke-width:2.5}
.ca-ring-r{stroke:var(--verm);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease-io) 1.05s,fill .3s 1.7s}
.ca-ring-k{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(90deg);transform-origin:24px 24px;transition:stroke-dashoffset .35s var(--ease) 1.8s}
.ca-eval.in .ca-ring-r{stroke-dashoffset:0;fill:var(--verm)}
.ca-eval.in .ca-ring-k{stroke-dashoffset:0}

@media (max-width:900px){
  .ca-pair{display:block}
  .ca-b--eval{padding-left:0;margin-top:clamp(72px,10vw,120px)}
  .ca-pair .ca-bh h3,.ca-pair .ca-bh p{min-height:0}
}
@media (max-width:760px){
  .ca-pm{display:flex;flex-direction:column}
  .ca-board{order:-1;width:100%;aspect-ratio:560 / 470;margin-bottom:28px}
  .ca-bl{--ax:var(--px);--ay:var(--py)}
  .ca-bl--s0.ca-bl--s2{display:none}
  .ca-bl--ag{--ax:82.14%;--ay:38%}
  .ca-pm[data-s="2"] .ca-bl--ag{--ax:39.29%;--ay:64.26%}
  .ca-ag{transform:translate(240px,-130px)}
  .ca-bl--out{white-space:normal;width:max-content;max-width:92%;text-align:left}
  .ca-pz-txt{width:calc(100% - var(--m) * 2)}
  .ca-lede{margin-top:20px}
  .ca-bh p{margin-top:14px}
  .ca-wmain{grid-template-columns:1fr 40px;min-height:0}
  .ca-key{width:6.2em}
  .ca-ln:not(.ca-ln--k) .ca-key,.ca-ln:not(.ca-ln--k) > .ca-val:first-of-type{margin-left:10px}
  .ca-ln b{width:22px}
  .ca-fold span{margin-left:22px}
  .ca-ln{font-size:var(--s-small)}
  .ca-sheet{min-height:0;padding:18px 18px 22px}
  .ca-assess{padding-top:28px}
  .ca-ring{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  .ca-pin{height:auto}
  .ca-stick{position:static;height:auto;overflow:visible;display:flex;flex-direction:column}
  .ca-pz{position:relative;left:auto;top:auto;width:100%;transform:none}
  .ca-maroon{display:none}
  .ca-pz-txt{position:static;transform:none;width:auto;background:var(--maroon);padding:var(--sec) var(--m)}
}
@media (prefers-reduced-motion:reduce){
  .ca-pc,.ca-slot,.ca-ag,.ca-ticks,.ca-bl,.ca-steps li,.ca-pz-piece,.ca-pz-txt .eyebrow,.ca-p,.ca-lede,.ca-ln,.ca-who,.ca-wstat,.ca-wstat .ca-ic,.ca-box,.ca-box svg,.ca-agr,.ca-assess p span,.ca-ring-r,.ca-ring-k{transition:none!important}
}