/* gx-architect.css — "Watch it build" widget (scoped .gx-arch). Brand palette; strict-CSP safe. */
.gx-arch{--ga-garnet:#e0244a;--ga-gold:#ffc65a;--ga-teal:#37e6d2;--ga-ink:#f3eef0;--ga-mute:#a99ea6;--ga-line:rgba(255,255,255,.12);--ga-panel:#100e1b;
  background:#07060d;color:var(--ga-ink);padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,3rem);border-top:1px solid var(--ga-line)}
.gx-arch__wrap{max-width:1100px;margin:0 auto}
.gx-arch__eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ga-teal);margin:0 0 .7rem}
.gx-arch h2{font-family:'Chakra Petch','Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:clamp(1.8rem,4.4vw,3rem);letter-spacing:-.02em;line-height:1.02;margin:0 0 .7rem;text-wrap:balance}
.gx-arch__sub{color:var(--ga-mute);font-size:clamp(1rem,2vw,1.15rem);line-height:1.5;max-width:60ch;margin:0 0 1.8rem}
.gx-arch__sub b{color:var(--ga-ink)}
.gx-arch__chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2rem}
.gx-arch__chip{font:inherit;font-size:.92rem;font-weight:500;color:var(--ga-ink);background:rgba(255,255,255,.05);border:1px solid var(--ga-line);
  border-radius:999px;padding:.6rem 1.1rem;min-height:44px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.gx-arch__chip:hover{border-color:var(--ga-garnet)}
.gx-arch__chip:active{transform:translateY(1px)}
.gx-arch__chip[aria-pressed="true"]{background:rgba(224,36,74,.16);border-color:var(--ga-garnet);color:#fff}
.gx-arch__chip:disabled{opacity:.55;cursor:default}
.gx-arch__chip:focus-visible{outline:2px solid var(--ga-teal);outline-offset:2px}
.gx-arch__stage{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;align-items:start;
  background:var(--ga-panel);border:1px solid var(--ga-line);border-radius:16px;padding:clamp(1.1rem,3vw,1.8rem)}
.gx-arch__col h3{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ga-mute);margin:0 0 .8rem;font-weight:600}
.gx-arch__plantext{font-size:.98rem;line-height:1.6;color:#e7dde2;white-space:pre-wrap;min-height:9rem}
.gx-arch__plantext:empty::after{content:'…';color:var(--ga-mute)}
.gx-arch__imgwrap{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#0b0913;border:1px solid var(--ga-line);display:grid;place-items:center}
.gx-arch__imgwrap img{width:100%;height:100%;object-fit:cover;display:block;animation:gaFade .5s ease}
@keyframes gaFade{from{opacity:0}to{opacity:1}}
.gx-arch__imgwrap.is-loading::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(224,36,74,.14) 50%,transparent 80%);
  background-size:220% 100%;animation:gaShimmer 1.3s linear infinite}
@keyframes gaShimmer{from{background-position:200% 0}to{background-position:-120% 0}}
.gx-arch__imgnote{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--ga-mute)}
.gx-arch__status{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--ga-mute);margin:1rem 0 0;min-height:1.2em}
.gx-arch__status.is-run{color:var(--ga-gold)}
.gx-arch__status.is-done{color:var(--ga-teal)}
.gx-arch__status.is-err{color:#ff6b7f}
@media (max-width:720px){.gx-arch__stage{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gx-arch__imgwrap.is-loading::after,.gx-arch__imgwrap img{animation:none}}