/* AgentGate shared tokens and primitives. Rail-signal identity: black ground, signal yellow means "a person must decide",
   green and red appear only for allow and deny. No inline styles anywhere: the CSP forbids them. */
:root{color-scheme:dark;
--bg:#0c0c0a;--panel:#141411;--panel2:#1b1b17;--raise:#22211c;--line:#2b2a24;--line2:#3d3c33;
--ink:#f3f1e8;--mute:#aaa798;--faint:#79766b;
--allow:#35d682;--allow-soft:rgba(53,214,130,.13);--hold:#ffd21f;--hold-ink:#ffd21f;--hold-soft:rgba(255,210,31,.13);--on-hold:#171200;--deny:#ff5443;--deny-soft:rgba(255,84,67,.14);
--display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;--sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--tape:repeating-linear-gradient(-45deg,var(--hold) 0 9px,var(--bg) 9px 18px)}
:root[data-theme=light]{color-scheme:light;
--bg:#ecebe3;--panel:#f7f6f0;--panel2:#e3e0d5;--raise:#fffefa;--line:#d4d1c3;--line2:#b9b5a4;
--ink:#14130f;--mute:#57544a;--faint:#8a867a;
--allow:#0b7a45;--allow-soft:rgba(11,122,69,.11);--hold:#ffcc00;--hold-ink:#6b4f00;--hold-soft:rgba(255,204,0,.2);--on-hold:#171200;--deny:#c22f1e;--deny-soft:rgba(194,47,30,.1)}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
code,.mono{font-family:var(--mono);font-size:.88em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--hold);outline-offset:2px;border-radius:3px}
:root[data-theme=light] :focus-visible{outline-color:var(--ink)}
::selection{background:var(--hold);color:var(--on-hold)}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the signal head: the logo and the product in one shape */
.mark{display:inline-block;width:18px;height:30px;border-radius:6px;flex:none;background:var(--ink);
background-image:radial-gradient(circle at 50% 20%,var(--deny) 0 3.6px,transparent 4px),radial-gradient(circle at 50% 50%,var(--hold) 0 3.6px,transparent 4px),radial-gradient(circle at 50% 80%,var(--allow) 0 3.6px,transparent 4px)}
:root[data-theme=light] .mark{background-color:#14130f}
.word{font:800 22px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 15px;border-radius:4px;border:1.5px solid var(--line2);background:var(--raise);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .12s,background .12s,transform .08s}
.btn:hover{border-color:var(--ink)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:hover{border-color:var(--line2)}
.btn.primary{background:var(--hold);border-color:var(--hold);color:var(--on-hold)}.btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.ok{background:var(--allow);border-color:var(--allow);color:#03140b}.btn.ok:hover{filter:brightness(1.1)}
:root[data-theme=light] .btn.ok{color:#fff}
.btn.no{background:transparent;border-color:var(--deny);color:var(--deny)}.btn.no:hover{background:var(--deny-soft);border-color:var(--deny)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mute)}.btn.ghost:hover{color:var(--ink);background:var(--panel2);border-color:transparent}
.btn.sm{height:28px;padding:0 10px;font-size:13px}.btn.lg{height:46px;padding:0 22px;font-size:15px}.btn.block{width:100%;height:42px}
kbd{display:inline-block;font:500 11px/1 var(--mono);background:var(--panel2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:3px;padding:3px 5px;color:var(--mute)}
.btn.primary kbd,.btn.ok kbd{background:rgba(0,0,0,.16);border-color:rgba(0,0,0,.25);color:inherit}
/* effect tags: the only places green, yellow and red appear as text */
.tag{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:3px;font:600 11.5px/1 var(--mono);white-space:nowrap;background:var(--panel2);color:var(--mute);border:1px solid var(--line)}
.tag::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.tag.t-allow,.tag.t-executed,.tag.t-completed,.tag.t-valid,.tag.t-approved{color:var(--allow);background:var(--allow-soft);border-color:transparent}
.tag.t-approve,.tag.t-waiting_approval,.tag.t-pending_approval,.tag.t-running,.tag.t-expired{color:var(--hold-ink);background:var(--hold-soft);border-color:transparent}
.tag.t-deny,.tag.t-denied,.tag.t-rejected,.tag.t-aborted,.tag.t-invalid,.tag.t-failed{color:var(--deny);background:var(--deny-soft);border-color:transparent}
/* the train: a run as coupled cars on a rail */
.train{display:flex;align-items:stretch;overflow-x:auto;padding:16px 2px 22px;background-image:linear-gradient(var(--line2),var(--line2)),linear-gradient(var(--line2),var(--line2));background-size:100% 2px;background-position:0 calc(100% - 5px),0 calc(100% - 10px);background-repeat:no-repeat;background-attachment:local;scrollbar-width:thin}
.car{flex:none;width:136px;min-height:100px;margin:0 0 16px;padding:13px 10px 9px;border:1.5px solid var(--line2);background:var(--panel);border-radius:4px;text-align:left;display:flex;flex-direction:column;gap:1px;position:relative;color:var(--ink);font:inherit}
button.car{cursor:pointer}button.car:hover{border-color:var(--ink)}
.car::before{content:'';position:absolute;left:-1.5px;right:-1.5px;top:-1.5px;height:6px;border-radius:4px 4px 0 0;background:var(--line2)}
.car.k-allow::before{background:var(--allow)}.car.k-deny::before{background:var(--deny)}.car.k-hold::before{background:var(--tape)}
.car::after{content:'';position:absolute;left:12px;right:12px;bottom:-12px;height:8px;background:radial-gradient(circle at 10% 50%,var(--ink) 0 3.2px,transparent 3.8px),radial-gradient(circle at 90% 50%,var(--ink) 0 3.2px,transparent 3.8px)}
.car .cs{font:500 11px/1.2 var(--mono);color:var(--faint)}
.car .ct{font:600 14px/1.25 var(--sans)}
.car .cd{font:400 11.5px/1.3 var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.car .ch{margin-top:auto;padding-top:8px;font:500 12px/1 var(--mono);color:var(--faint);letter-spacing:.02em}
.car.sel{border-color:var(--ink)}
.car.broken{border-color:var(--deny);box-shadow:0 0 0 3px var(--deny-soft)}
.car.broken .ch{color:var(--deny)}
.car.after{opacity:.45;filter:grayscale(1)}
.coupling{flex:none;width:24px;align-self:center;height:6px;margin:0 0 16px;background:var(--ink);position:relative;top:-2px}
.coupling.cut{background:repeating-linear-gradient(90deg,var(--deny) 0 4px,transparent 4px 8px)}
.coupling.after{opacity:.35}

/* motion: cars couple in one after another; a failed check snaps at the broken car and dims what follows */
.train.go.run .car,.train.go.run .coupling{animation:car-in .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*70ms)}
.train.go.chk .car:not(.after):not(.broken),.train.go.chk .coupling:not(.after):not(.cut){animation:chk .5s ease both;animation-delay:calc(var(--i)*90ms)}
.train.go.chk .car.broken{animation:snap .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i)*90ms)}
.train.go.chk .car.after,.train.go.chk .coupling.after{animation:fade-after .6s ease both;animation-delay:calc((var(--bi,0) + 1)*90ms + .2s)}
.train.go.chk .coupling.cut{animation:cut .5s ease both;animation-delay:calc(var(--i)*90ms)}
@keyframes car-in{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes chk{0%{box-shadow:0 0 0 0 var(--allow-soft)}40%{box-shadow:0 0 0 5px var(--allow-soft)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes snap{0%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-1deg)}50%{transform:translateX(5px) rotate(1deg)}75%{transform:translateX(-3px)}100%{transform:none}}
@keyframes cut{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes fade-after{from{opacity:1;filter:none}}

/* kinetic type. Initial states apply only before .kin-in, so the finished state is always the natural one.
   --i is the letter index, --wi the word index, --w the pointer-wave amount (hero only). */
.kin .kin-h .kw{display:inline-block;vertical-align:top}
.kin .kin-h .kl{display:inline-block;will-change:transform}
.kin .kin-h.kin-in .kl{transform:translateY(calc(var(--w,0)*-.12em)) rotate(calc(var(--w,0)*-3deg))}
/* rise: words slide up through a mask */
.kin .kin-h[data-fx=rise] .kw{overflow:hidden;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
.kin .kin-h[data-fx=rise]:not(.kin-in) .kl{transform:translateY(115%);opacity:0}
.kin .kin-h[data-fx=rise].kin-in .kl{transition:transform .8s cubic-bezier(.2,.9,.2,1) calc(var(--wi)*90ms),opacity .4s ease calc(var(--wi)*90ms)}
/* flip: letters fold up from the baseline and cool from a hot colour to the text colour */
.kin .kin-h[data-fx=flip]{perspective:800px}
.kin .kin-h[data-fx=flip]:not(.kin-in) .kl{transform:rotateX(-100deg) translateY(35%);transform-origin:50% 100%;opacity:0;color:var(--kc,inherit)}
.kin .kin-h[data-fx=flip].kin-in .kl{transform-origin:50% 100%;transition:transform .85s cubic-bezier(.2,1.25,.3,1) calc(var(--i)*32ms),opacity .2s ease calc(var(--i)*32ms),color 1.2s ease calc(var(--i)*32ms + .25s)}
/* blur: words come into focus */
.kin .kin-h[data-fx=blur]:not(.kin-in) .kw{filter:blur(16px);opacity:0;transform:scale(1.25) translateY(.18em)}
.kin .kin-h[data-fx=blur].kin-in .kw{transition:filter .9s cubic-bezier(.2,.8,.2,1) calc(var(--wi)*110ms),opacity .7s ease calc(var(--wi)*110ms),transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--wi)*110ms)}
/* wipe: each word is uncovered left to right */
.kin .kin-h[data-fx=wipe]:not(.kin-in) .kw{clip-path:inset(-12% 100% -12% 0)}
.kin .kin-h[data-fx=wipe]:not(.kin-in) .kl{transform:translateX(-.5em)}
.kin .kin-h[data-fx=wipe].kin-in .kw{clip-path:inset(-12% -4% -12% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1) calc(var(--wi)*110ms)}
.kin .kin-h[data-fx=wipe].kin-in .kl{transition:transform .8s cubic-bezier(.2,.9,.2,1) calc(var(--wi)*110ms)}
/* pop: letters spring up from small with overshoot */
.kin .kin-h[data-fx=pop]:not(.kin-in) .kl{transform:scale(.2) rotate(-14deg);opacity:0}
.kin .kin-h[data-fx=pop].kin-in .kl{transition:transform .65s cubic-bezier(.3,1.7,.5,1) calc(var(--i)*28ms),opacity .2s ease calc(var(--i)*28ms)}
/* once played, the pointer wave needs a quick response, not the entrance delays */
.kin .kin-h.kin-done .kl,.kin .kin-h.kin-done .kw{transition:transform .25s ease-out,opacity .25s,filter .25s,color .25s!important;transition-delay:0s!important}
/* scroll fill: a paragraph lights up word by word as it crosses the screen */
.kin .fw{opacity:var(--o,.3);transition:opacity .2s linear}
/* magnetic buttons lean toward the pointer; `translate` is independent of any hover transform */
.kin [data-mag]{transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.kin-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--kp,currentColor);transform:scaleX(var(--p,0));transform-origin:0 50%;z-index:100;pointer-events:none}
.kin-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--sc,rgba(255,255,255,.12)),transparent 70%);border-radius:inherit}
.kin-band{overflow:hidden;white-space:nowrap}
.kin-band>div{display:flex;width:max-content;will-change:transform}
@media (prefers-reduced-motion:reduce){.kin-progress{display:none}}