/* agents.html stage: licenses backpack + owner line. Loaded after style.css; relies on its tokens. */

/* the figure now lives in a column wrapper so the tray can sit beside or under it */
.pf-figcol{grid-area:fig;position:relative;display:flex;flex-direction:column;min-width:0}
.pf-figcol .pf-fig{grid-area:auto;flex:1}

/* LICENSES row control */
.pf-lic-btn{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;font-size:15px;font-weight:400;color:var(--cyan);cursor:pointer;text-align:left;
  text-decoration:none;text-underline-offset:3px;transition:text-shadow .2s}
.pf-lic-btn:hover{text-decoration:underline;text-shadow:0 0 12px var(--cyan-glow)}
.pf-lic-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px;text-decoration:underline}
.pf-lic-btn[aria-expanded="true"]{text-decoration:underline}

/* card tilts toward the viewer while the backpack is open */
.pf-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 392px;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.pf-lic-open .pf-tilt{transform:rotateX(-8deg) scale(1.04)}
.pf-disc{transition:box-shadow .4s,border-color .4s}
.pf-lic-open .pf-disc{border-color:#7ff3ff;
  box-shadow:0 0 36px var(--cyan),0 0 100px rgba(0,229,255,.5),inset 0 0 56px rgba(0,229,255,.5)}

/* tray: fans out of the lower right of the figure */
.pf-tray{position:absolute;right:12px;bottom:40px;z-index:5;display:flex;flex-direction:column-reverse;
  align-items:flex-end;gap:8px;pointer-events:none;visibility:hidden;transition:visibility 0s linear .5s}
.pf-lic-open .pf-tray{visibility:visible;transition-delay:0s}
.pf-tray.pf-two{display:grid;grid-template-columns:repeat(2,210px);direction:rtl;align-items:end;justify-items:end;gap:8px}
.pf-two .pf-badge{direction:ltr;order:var(--ord)}
.pf-badge{--o:1;width:210px;padding:9px 12px 10px;background:#07161e;border:1px solid var(--cyan);border-radius:8px;
  box-shadow:0 0 14px var(--cyan-glow),4px 4px 0 rgba(0,0,0,.5);
  transform-origin:100% 100%;opacity:0;transform:translate(36px,36px) rotate(14deg) scale(.6);
  transition:transform .25s ease-in,opacity .2s ease-in}
.pf-badge.off{--o:.55}
.pf-lic-open .pf-badge{pointer-events:auto;opacity:var(--o);
  transform:translate(calc(var(--i) * -5px),0) rotate(calc(var(--i) * -1deg));
  transition:transform .4s cubic-bezier(.2,.9,.3,1.15) calc(var(--i) * 60ms),opacity .3s ease-out calc(var(--i) * 60ms)}
.pf-b-type{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-variant:small-caps;color:#fff;margin-bottom:5px}
.pf-b-line{font-size:12.5px;font-weight:400;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
.pf-b-line+.pf-b-line{color:var(--muted)}
.pf-pill{display:inline-block;margin-top:7px;padding:2px 8px;border-radius:999px;font-size:9.5px;letter-spacing:.12em;font-weight:500;border:1px solid}
.pf-pill.on{color:var(--amber);border-color:var(--amber);background:rgba(242,169,80,.1)}
.pf-pill.off{color:var(--muted2);border-color:var(--muted2)}

.pf-owner{margin:6px auto 0;max-width:640px;text-align:center;font-size:13px;line-height:1.6;color:var(--muted2)}

/* CAPTAIN block under the attribute rows */
.pf-captain{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.pf-eyebrow{margin:0 0 4px;font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:.06em;
  font-variant:small-caps;color:var(--muted);line-height:1.5}
.pf-captain .pf-row{grid-template-columns:124px 1fr}
.pf-captain .pf-k{overflow-wrap:anywhere;font-size:11px;letter-spacing:.09em}
.pf-captain .pf-line{display:block;padding:2px 0}
.pf-captain .pf-v a{text-underline-offset:3px}
.pf-ent{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.pf-sfx,.pf-sub{color:var(--muted);font-size:12.5px}
.pf-sub{margin-top:4px;line-height:1.5}
.pf-dash{color:var(--muted2)}

@media (max-width:1100px){
  .pf-badge{width:170px;padding:8px 10px 9px}
  .pf-tray.pf-two{grid-template-columns:repeat(2,170px)}
}
@media (max-width:600px){
  .pf-tilt{transform-origin:50% 320px}
  /* phone: captain rows wrap cleanly; every link row is at least a 44px tap target */
  .pf-captain .pf-row{grid-template-columns:124px 1fr;min-height:44px;align-items:center}
  .pf-captain .pf-line{display:flex;align-items:center;min-height:44px;padding:0}
  .pf-ent a{position:relative}
  .pf-ent a::before{content:"";position:absolute;inset:-13px -8px}  /* 44px tap target without stretching the line */
  /* phone: a vertical list under the figure, no fan */
  .pf-tray,.pf-tray.pf-two{position:static;display:flex;flex-flow:column nowrap;direction:ltr;width:auto;align-content:normal;align-items:stretch;gap:8px;
    max-height:0;overflow:hidden;visibility:hidden;margin-top:0;
    transition:max-height .4s ease,margin-top .4s ease,visibility 0s linear .45s}
  .pf-lic-open .pf-tray,.pf-lic-open .pf-tray.pf-two{max-height:900px;margin-top:10px;visibility:visible;transition-delay:0s}
  .pf-two .pf-badge{order:0}
  .pf-badge{width:auto;padding:9px 12px 10px;transform:translateY(-8px) scale(.97);transform-origin:50% 0}
  .pf-lic-open .pf-badge{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-tilt,.pf-badge,.pf-tray,.pf-disc{transition:none!important}
}

/* noir turnaround (assets/stage2d.js; the three.js render in stage3d.js is kept in the repo but not loaded):
   the cyan turntable disc stays; the 2D card gives way to the drawn frames, which stand on the disc */
/* no z-index on .pf-2d: it must not form its own stacking context, or the frames could not blend with the disc beneath them */
.pf-2d{position:absolute;inset:0;visibility:hidden;pointer-events:none;touch-action:pan-y}
.pf-fig.pf-has-2d .pf-2d{visibility:visible;pointer-events:auto}
/* the frames' near-black ground is lightened against the backdrop (disc and red halo show through) and feathered at the edges */
.pf-2d-stack{position:absolute;isolation:isolate;pointer-events:none}
/* Dan 10/16: no disc, no halo, no feathering. The drawing is shown as drawn, on its own near-black ground. */
.pf-fig.pf-has-2d .pf-disc{display:none}
.pf-2d-stack img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.pf-fig.pf-has-2d .pf-scene{display:block}
.pf-fig.pf-has-2d .pf-tilt{display:none}
.pf-fig.pf-has-2d{cursor:grab;
  background:#140f0b}
.pf-fig.pf-has-2d.pf-grab{cursor:grabbing}
.pf-fig.pf-has-2d .pf-hint{z-index:2}
/* the disc sits at the foot of the (possibly tall) stage so the figure can use the full height */
.pf-fig.pf-has-2d .pf-scene{perspective-origin:50% calc(100% - 150px)}
.pf-fig.pf-has-2d .pf-disc{top:auto;bottom:-60px}
@media (max-width:600px){.pf-fig.pf-has-2d .pf-disc{top:auto;bottom:-70px}.pf-fig.pf-has-2d .pf-scene{perspective-origin:50% calc(100% - 90px)}}
.pf-amber{color:var(--amber);font-weight:500;letter-spacing:.04em}

/* STAGE TWO (agents.html#atlas): same stage classes as stage one, so only the section frame and the no-model states live here */
section.block#the-agent{padding-bottom:20px}
section.block#atlas{padding:34px 20px 54px;scroll-margin-top:72px}
.pf-subline{margin:0;font-size:13.5px;letter-spacing:.04em;color:var(--muted)}
.pf-soon-txt{display:none;position:absolute;left:0;right:0;top:42%;z-index:1;text-align:center;pointer-events:none;
  font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted2)}
.pf-fig.pf-soon .pf-soon-txt{display:block}
.pf-fig.pf-soon{cursor:default}
.pf-fig.pf-soon .pf-hint,.pf-fig.pf-has-2d .pf-soon-txt{display:none}
@media (max-width:600px){
  section.block#atlas{padding:26px 16px 42px}
  .pf-soon-txt{top:48%}
}
#atlas .pf-owner{margin-top:16px}