/* 04 SIGNATURE — Generation playground (brief → generate → check → review → publish) */
.cat-pg__ui{position:relative;padding:clamp(14px,2.2vw,28px);border:1px solid var(--on-ink-line);border-radius:var(--r-xl);background:rgba(255,255,255,.025)}
.cat-pg__rail{display:flex;flex-wrap:wrap;gap:8px 10px}
.cat-pg__rail li{flex:1 1 110px;padding:0 2px 12px;border-bottom:2px solid var(--on-ink-line);font-family:var(--f);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-3);transition:color var(--d2),border-color var(--d2)}
.cat-pg__rail li.is-done{color:var(--on-ink-2);border-color:var(--on-ink-3)}
.cat-pg__rail li.is-on{color:var(--on-ink);border-color:var(--blue)}
[data-pg-stage="done"] .cat-pg__rail li{color:var(--on-ink-2);border-color:var(--blue)}
.cat-pg__rail li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--on-ink-3);vertical-align:middle}
.cat-pg__rail li.is-done::before,[data-pg-stage="done"] .cat-pg__rail li::before{background:var(--blue);box-shadow:none}
.cat-pg__rail li.is-on::before{background:var(--blue);box-shadow:0 0 0 3px var(--blue-wash-2)}

.cat-pg__top,.cat-pg__bottom{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.62fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(14px,1.6vw,20px)}
.cat-pg__brief,.cat-pg__review,.cat-pg__pub{min-width:0;padding:clamp(18px,2vw,24px);border:1px solid var(--on-ink-line);border-radius:var(--r-lg);background:var(--ink-2)}
.cat-pg__h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-h3);letter-spacing:-.012em;color:var(--on-ink)}
.cat-pg__h .cat-mono{font-size:10.5px;color:var(--on-ink-3)}
.cat-pg__field{border:0;margin-top:16px;min-width:0}
.cat-pg__field legend{margin-bottom:8px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-3)}
.cat-pg__chips{display:flex;flex-wrap:wrap;gap:6px}
.cat-pg__chip{position:relative}
.cat-pg__chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cat-pg__chip span{display:block;padding:6px 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--on-ink-line);font-size:var(--t-xs);font-weight:500;color:var(--on-ink-2);transition:background var(--d1),color var(--d1),box-shadow var(--d1)}
.cat-pg__chip:hover span{box-shadow:inset 0 0 0 1px var(--on-ink-3);color:var(--on-ink)}
.cat-pg__chip input:checked+span{background:var(--blue);color:#fff;box-shadow:none}
.cat-pg__chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.cat-pg__locks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px}
.cat-pg__locks::before{content:"Locked";margin-right:4px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.cat-pg__locks span{padding:2px 8px;border:1px dashed var(--on-ink-line);border-radius:var(--r-pill);font-family:var(--f);font-size:10px;color:var(--on-ink-2)}
.cat-pg__prompt{margin-top:14px;padding:10px 12px;min-height:62px;border-radius:var(--r-sm);background:rgba(0,0,0,.3);font-family:var(--f);font-size:11px;line-height:1.6;color:var(--on-ink-2);overflow-wrap:anywhere}
.cat-pg__go{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}

.cat-pg__vars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);align-items:start;min-width:0}
.cat-pg__var{min-width:0;border:1px solid var(--on-ink-line);border-radius:var(--r-lg);background:var(--ink-2);overflow:hidden;padding-bottom:10px;transition:border-color var(--d2),box-shadow var(--d2)}
.cat-pg__frame{position:relative;aspect-ratio:var(--ar,4/5);max-height:340px;width:100%;overflow:hidden;background:rgba(255,255,255,.04)}
.cat-pg__frame img{width:100%;height:100%;object-fit:cover;transition:opacity var(--d3) var(--e),transform var(--d3) var(--e)}
.cat-pg__blocked{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;font-family:var(--f);font-size:10px;line-height:1.6;color:var(--on-ink-3)}
.cat-pg__blocked::before{content:"";position:absolute;inset:0;z-index:-1}
.cat-pg__var[data-var="D"] .cat-pg__frame{background-color:var(--ink);background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:10px 10px}
.cat-pg__copy{position:absolute;left:12%;bottom:12%;display:flex;flex-direction:column;gap:1px;max-width:76%;padding:6px 9px;border-radius:6px;background:rgba(25,25,29,.82);transition:left var(--d3) var(--e),bottom var(--d3) var(--e)}
.cat-pg__copy b{font-family:var(--f-h);font-weight:500;font-size:12px;letter-spacing:-.012em;color:var(--on-ink)}
.cat-pg__copy em{font-style:normal;font-size:10px;color:var(--on-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-pg__frame.is-tight .cat-pg__copy{left:3%;bottom:3%}
.cat-pg__var[data-var="D"] .cat-pg__copy{display:none}
.cat-pg__cs{position:absolute;inset:8%;border:1px dashed var(--on-ink-3);border-radius:4px;opacity:0;transition:opacity var(--d2)}
.cat-pg__frame.is-tight .cat-pg__cs{border-color:var(--blue)}
.cat-pg__scan{position:absolute;inset:0;opacity:0;pointer-events:none}
.cat-pg__scan::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);box-shadow:0 0 14px 2px var(--blue)}
.cat-pg__vhead{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 12px 8px}
.cat-pg__vt{font-size:14px;letter-spacing:-.012em;color:var(--on-ink)}
.cat-pg__verdict{font-family:var(--f);font-size:10px;color:var(--on-ink-3);transition:opacity var(--d2)}
.cat-pg__var.is-pass .cat-pg__verdict{color:var(--blue)}
.cat-pg__checks{padding:0 12px}
.cat-pg__checks li{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 0;border-top:1px solid rgba(255,255,255,.06);font-family:var(--f);font-size:10px;color:var(--on-ink-2)}
.cat-pg__checks span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-pg__checks b{flex:none;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font-size:9px;line-height:1;color:#fff;transition:background var(--d2),box-shadow var(--d2)}
.cat-pg__checks .is-ok b{background:var(--blue)}
.cat-pg__checks .is-ok b::after{content:"✓"}
.cat-pg__checks .is-no b{box-shadow:inset 0 0 0 1px var(--on-ink-2)}
.cat-pg__checks .is-no b::after{content:"✕";color:var(--on-ink)}
.cat-pg__checks .is-no span{color:var(--on-ink)}

/* stage-driven states */
[data-pg-stage="brief"] .cat-pg__checks b,[data-pg-stage="gen"] .cat-pg__checks b,[data-pg-stage="check"] .cat-pg__checks li:not(.is-scored) b{background:transparent;box-shadow:inset 0 0 0 1px var(--on-ink-line)}
[data-pg-stage="brief"] .cat-pg__checks b::after,[data-pg-stage="gen"] .cat-pg__checks b::after,[data-pg-stage="check"] .cat-pg__checks li:not(.is-scored) b::after{content:""}
[data-pg-stage="brief"] .cat-pg__verdict,[data-pg-stage="gen"] .cat-pg__verdict,[data-pg-stage="check"] .cat-pg__var:not(.is-scored) .cat-pg__verdict{opacity:0}
[data-pg-stage="brief"] .cat-pg__frame img{opacity:.35}
[data-pg-stage="gen"] .cat-pg__frame img{opacity:.08;transform:scale(1.06)}
[data-pg-stage="gen"] .cat-pg__copy,[data-pg-stage="brief"] .cat-pg__copy,[data-pg-stage="gen"] .cat-pg__blocked,[data-pg-stage="brief"] .cat-pg__blocked{opacity:0}
[data-pg-stage="gen"] .cat-pg__scan{opacity:1;animation:cat-pgscan 1.1s var(--e-io) infinite;animation-delay:calc(var(--i) * 120ms)}
@keyframes cat-pgscan{from{transform:translateY(0)}to{transform:translateY(100%)}}
[data-pg-stage="check"] .cat-pg__cs{opacity:1}
[data-pg-stage="review"] .cat-pg__var.is-fail,[data-pg-stage="publish"] .cat-pg__var.is-fail,[data-pg-stage="done"] .cat-pg__var.is-fail{opacity:.55}
[data-pg-stage="review"] .cat-pg__var.is-fail .cat-pg__cs,[data-pg-stage="done"] .cat-pg__frame.is-tight .cat-pg__cs,[data-pg-stage="publish"] .cat-pg__frame.is-tight .cat-pg__cs{opacity:1}
[data-pg-stage="publish"] .cat-pg__var.is-picked,[data-pg-stage="done"] .cat-pg__var.is-picked{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}

.cat-pg__note{margin-top:8px;font-size:var(--t-xs);color:var(--on-ink-3)}
.cat-pg__queue{margin-top:14px}
.cat-pg__queue li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:11px 0;border-top:1px solid var(--on-ink-line)}
.cat-pg__qid{font-size:var(--t-sm);font-weight:500;color:var(--on-ink)}
.cat-pg__qs{grid-row:2;font-family:var(--f);font-size:10px;color:var(--on-ink-3)}
.cat-pg__ok{grid-row:1 / span 2;grid-column:2;padding:7px 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--on-ink-3);font-size:var(--t-xs);font-weight:500;color:var(--on-ink);transition:background var(--d1),box-shadow var(--d1)}
.cat-pg__ok:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--on-ink)}
.cat-pg__ok[aria-pressed="true"]{background:var(--blue);box-shadow:none;color:#fff}
.cat-pg__ok[disabled]{opacity:.35;cursor:not-allowed}
.cat-pg__queue .is-back{opacity:.6}
.cat-pg__queue .is-back .cat-pg__qid{font-weight:400}
.cat-pg__matrix{display:grid;grid-template-columns:34px repeat(var(--cols),minmax(0,1fr));gap:4px;margin-top:16px}
.cat-pg__fh,.cat-pg__mh{font-family:var(--f);font-size:9.5px;color:var(--on-ink-3);text-align:center;line-height:14px}
.cat-pg__mh{text-align:left}
.cat-pg__fh{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding-bottom:2px}
.cat-pg__ratio{display:block;height:20px;max-width:34px;border:1px solid var(--on-ink-3);border-radius:2px}
.cat-pg__matrix>span:first-child{align-self:end}
.cat-pg__matrix i{height:14px;border-radius:3px;background:rgba(255,255,255,.06);transition:background .3s var(--e),transform .3s var(--e)}
.cat-pg__matrix i.is-on{background:var(--blue)}
.cat-pg__matrix i.is-pop{animation:cat-pop .36s var(--e)}
@keyframes cat-pop{50%{transform:scale(1.35)}}
.cat-pg__status{margin-top:14px;font-family:var(--f);font-size:11px;line-height:1.6;color:var(--on-ink-2)}
.cat-pg__again{margin-top:10px;padding:2px 0;border-bottom:1px solid var(--on-ink-3);font-size:var(--t-xs);font-weight:500;color:var(--on-ink)}
.cat-pg__again:hover{border-color:var(--on-ink)}

.cat-pg__vars{grid-template-rows:auto 1fr}
.cat-pg__frame{width:min(100%,calc(340px * var(--arn,.8)));margin-inline:auto}
.cat-pg__tracebox{grid-column:1 / -1;order:1;align-self:stretch;display:flex;min-width:0;padding:12px 16px;border:1px solid var(--on-ink-line);border-radius:var(--r-lg);background:rgba(0,0,0,.25)}
.cat-pg__trace{flex:1;min-width:0;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;font-family:var(--f);font-size:11px;line-height:1.85;color:var(--on-ink-2);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}
.cat-pg__trace li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;flex:none}
.cat-pg__trace b{font-weight:500;color:var(--blue)}
.cat-pg__trace span{overflow-wrap:anywhere}
.cat-pg__trace li.is-new{animation:cat-line .45s var(--e) both}
.cat-pg__ok[aria-pressed="true"][disabled]{opacity:1;cursor:default}

@media (max-width:1100px){.cat-pg__top,.cat-pg__bottom{grid-template-columns:minmax(0,1fr)}}
.cat-pg__rail b{font-weight:500;color:inherit;margin-right:4px}
@media (max-width:760px){.cat-pg__vars{grid-template-columns:repeat(2,minmax(0,1fr))}.cat-pg__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.cat-pg__rail li{min-width:0;padding-bottom:10px;font-size:9.5px;letter-spacing:.04em;line-height:1.5}.cat-pg__rail b{display:block;margin:4px 0 0}}