/* The Grid canvas (#/grid, js/views/grid.js) only. Its own world on purpose: Google Cloud console clarity, white
   surfaces on a light gray dotted canvas, one blue accent, Material chips, tabs, and side sheet, an 8px grid,
   Google Sans Flex. Dark follows the portal's theme toggle (GCP dark: #202124, #8AB4F8). The palette is the portal's
   own (css/tokens.css): every page wears the same colors. Every selector is under .gx or .gv, except the --gv-*
   names and body.on-grid. Status is still by default: color means Healthy, Watch, Failing,
   Standby, or Not connected. Motion is the camera, and Live activity when someone turns it on. */

/* The canvas's names for the portal's tokens (css/tokens.css), so every page shares one palette; the few the
   canvas alone uses (its dotted stage, raised chips, edges) are defined here, light and dark. */
:root{
  --gv-page:var(--bg); --gv-surface:var(--surface); --gv-line:var(--line); --gv-line-2:var(--line-2);
  --gv-ink:var(--ink); --gv-ink-2:var(--ink-2); --gv-ink-3:var(--ink-3);
  --gv-blue:var(--brand); --gv-blue-ink:var(--brand-d); --gv-blue-bg:var(--brand-wash);
  --gv-green:var(--ok-line); --gv-green-ink:var(--ok); --gv-green-bg:var(--ok-bg);
  --gv-amber:var(--warn-line); --gv-amber-ink:var(--warn); --gv-amber-bg:var(--warn-bg);
  --gv-red:var(--err-line); --gv-red-ink:var(--err); --gv-red-bg:var(--err-bg);
  --gv-raised:var(--hover);
  --gv-canvas:#F8F9FA; --gv-dots:#DADCE0; --gv-edge:#BDC1C6;
  --gv-e1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --gv-e2:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);
  --gv-font:var(--font);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --gv-canvas:#17181B; --gv-dots:#3C4043; --gv-edge:#5F6368;
  --gv-e1:0 1px 2px rgba(0,0,0,.6),0 1px 3px 1px rgba(0,0,0,.3);
  --gv-e2:0 1px 3px rgba(0,0,0,.6),0 4px 8px 3px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --gv-canvas:#17181B; --gv-dots:#3C4043; --gv-edge:#5F6368;
  --gv-e1:0 1px 2px rgba(0,0,0,.6),0 1px 3px 1px rgba(0,0,0,.3);
  --gv-e2:0 1px 3px rgba(0,0,0,.6),0 4px 8px 3px rgba(0,0,0,.3);
}
.gv{font-family:var(--gv-font);color:var(--gv-ink);font-variant-numeric:tabular-nums;min-width:0}
.gv ::selection{background:var(--gv-blue-bg);color:var(--gv-ink)}
.gv :focus-visible{outline:2px solid var(--gv-blue);outline-offset:2px}
.gv h1,.gv h2,.gv h3,.gv p{margin:0}
.gv a{color:var(--gv-blue-ink);text-underline-offset:3px}
.gv .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* chips and tags (Material) */
.gv-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--gv-line);border-radius:8px;font-size:13px;font-weight:500;color:var(--gv-ink-3);background:var(--gv-surface)}
.gv-chip .i{width:16px;height:16px}
.gv-chip.on{background:var(--gv-blue-bg);border-color:transparent;color:var(--gv-blue-ink)}
.gv-tag{--tb:var(--gv-raised);display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;flex:none;background:linear-gradient(var(--tb),var(--tb)),var(--gv-surface);color:var(--gv-ink-3)}
.gv-tag.t-blue{--tb:var(--gv-blue-bg);color:var(--gv-blue-ink)}
.gv-tag.t-amber{--tb:var(--gv-amber-bg);color:var(--gv-amber-ink)}
.gv-tag.t-green{--tb:var(--gv-green-bg);color:var(--gv-green-ink)}
.gv-tag.t-red{--tb:var(--gv-red-bg);color:var(--gv-red-ink)}
.gv-tag.t-muted{--tb:var(--gv-raised);color:var(--gv-ink-3)}

/* buttons */
.gv-btn{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--gv-line);background:var(--gv-surface);color:var(--gv-blue-ink);font:500 14px/1 var(--gv-font);cursor:pointer;text-decoration:none;transition:background .15s ease-out,box-shadow .15s ease-out}
.gv-btn:hover{background:var(--gv-blue-bg)}
.gv-btn.primary{background:var(--gv-blue);border-color:var(--gv-blue);color:var(--on-primary)}

.gv-btn.primary:hover{box-shadow:var(--gv-e1);background:var(--gv-blue)}
.gv-btn.text{border-color:transparent;background:none;padding:0 8px;margin-left:-8px;height:32px}
.gv-btn.text:hover{background:var(--gv-blue-bg)}
.gv-btn .i{width:16px;height:16px}

.gv-sec{padding:16px 24px}
.gv-sec + .gv-sec{border-top:1px solid var(--gv-line-2)}
.gv-sec h3{font-size:12px;line-height:16px;font-weight:500;color:var(--gv-ink-3);margin-bottom:8px}
.gv-sec p,.gv-sec li,.gv-sec dd{font-size:14px;line-height:20px;color:var(--gv-ink-2)}
.gv-sec p + p,.gv-sec ul + p,.gv-sec ul + ul{margin-top:8px}
.gv-sec > .gv-btn{margin-top:12px}
.gv-chips{display:flex;flex-wrap:wrap;gap:8px}
.gv-dl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;margin:0}
.gv-dl dt{font-size:13px;line-height:20px;color:var(--gv-ink-3)}
.gv-dl dd{margin:0}
.gv-ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px}
.gv-ul li::marker{color:var(--gv-ink-3)}
.gv-ul.draft{list-style:none;padding:0}
.gv-ul.draft li{display:flex;gap:8px;align-items:baseline}

/* lessons in the drawer */
.gv-lesson{border:1px solid var(--gv-line);border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.gv-lesson + .gv-lesson{margin-top:8px}
.gv-lesson.is-open{border-color:var(--gv-blue);box-shadow:0 0 0 1px var(--gv-blue)}
.gv-lesson p{font-size:13.5px}
.gv-ask{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--gv-ink)!important}
.gv-st{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--gv-ink-3)!important}
.gv-change{display:flex;flex-direction:column;gap:8px;width:100%}
.gv-diff{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;padding:8px 12px;border-radius:8px;background:var(--gv-raised);font-size:13px;line-height:20px;color:var(--gv-ink-2)}
.gv-diff.add{background:var(--gv-blue-bg);color:var(--gv-ink)}
.gv-k{font-size:12px;color:var(--gv-ink-3)}
.gv-diff.add .gv-k{color:var(--gv-blue-ink)}
.gv-replay{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.gv-replay p .gv-tag{margin-left:4px;vertical-align:1px}
.gv-rbar{height:6px;border-radius:3px;background:var(--gv-raised);overflow:hidden}
.gv-rbar i{display:block;height:100%;background:var(--gv-blue);border-radius:3px}
.gv-acts{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.gv-quiet{font-size:13px;line-height:20px;color:var(--gv-ink-3)}

/* the shell while the Grid is on screen: the nav, the chat, menus, and the modal wear this world's tokens */
body.on-grid .side,body.on-grid .ask,body.on-grid .pop,body.on-grid .modal{font-family:var(--gv-font)}
/* GCP dark's blue is light: what sits on it reads dark */

/* on the Grid the canvas is the status: the nav's failing count would only repeat it */
body.on-grid #navFail{display:none}
body.on-grid .ask .sugg{display:flex;flex-wrap:wrap;gap:8px}
body.on-grid .ask .sugg .chip{border-radius:8px;border:1px solid var(--gv-line);background:var(--gv-surface);color:var(--gv-blue-ink);font-weight:500}
body.on-grid .ask .sugg .chip:hover{background:var(--gv-blue-bg)}
.navmore{display:flex;align-items:center;gap:12px;width:100%;height:38px;padding:0 10px;margin-top:4px;border:0;border-radius:8px;background:none;color:var(--ink-3);font:inherit;font-size:15px;cursor:pointer;white-space:nowrap}
.navmore:hover{background:var(--hover);color:var(--ink)}
.navmore .kbd{margin-left:auto}
body.collapsed .navmore{justify-content:center;padding:0}
body.collapsed .navmore .lbl,body.collapsed .navmore .kbd{display:none}

/* the page: the canvas takes the whole window */
.main:has(.gx){background:var(--gv-page)}
.main:has(.gx) .page{max-width:none;padding:0;gap:0;display:block}
.gx{display:flex;flex-direction:column;height:100vh;height:100dvh;gap:0;min-width:0}
/* the Grid never scrolls the page: the shell is the window, each panel (nav, canvas, drawer) scrolls inside itself,
   and nothing inside it, in flow or positioned, can make the document taller */
html:has(body.on-grid){height:100%;overflow:hidden}
body.on-grid{height:100%;overflow:hidden;position:relative}
body.on-grid .app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
body.on-grid .side{height:100%}
body.on-grid .main{min-height:0;overflow:hidden}

/* the top bar: where you are, and the tools */
.gx-top{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 16px 8px 24px;border-bottom:1px solid var(--gv-line);background:var(--gv-surface);flex-wrap:wrap}
.gx-crumbs{display:flex;align-items:center;gap:2px;min-width:0;flex:1 1 auto;overflow:hidden;font-size:16px;line-height:24px}
@media (min-width:901px){.gx-top{flex-wrap:nowrap}.gx .gx-tools{flex:0 1 auto;min-width:0;flex-wrap:nowrap}.gx-tools>*{flex:none}.gx-tools>.gx-teachcue{flex:0 1 auto}.gx-cr{flex:0 1 auto;min-width:0}.gx-cr.is-cur{flex:none}}
.gx-cr{border:0;background:none;font:inherit;color:var(--gv-ink-3);padding:4px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.gx-cr:hover{background:var(--gv-raised);color:var(--gv-ink)}
.gx-cr.is-cur{color:var(--gv-ink);font-weight:500;cursor:default}
.gx-cr.is-cur:hover{background:none}
.gx-sep{display:inline-grid;color:var(--gv-ink-3)}
.gx-sep .i{width:14px;height:14px}
/* what the live call is doing, said once, floating at the top right of the canvas so the top bar keeps its room */
.gx-cap{position:absolute;top:12px;right:12px;z-index:4;display:flex;align-items:center;gap:8px;margin:0;padding:6px 14px;max-width:calc(100% - 24px);font-size:13.5px;font-weight:500;line-height:20px;color:var(--gv-ink);background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:18px;box-shadow:var(--gv-e1);pointer-events:none}
.gx-pulse{width:8px;height:8px;border-radius:50%;background:var(--gv-blue);flex:none;animation:gvpulse 2s ease-out infinite}
@keyframes gvpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gv-blue) 45%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.gx-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gx-tb{height:36px;padding:0 14px 0 12px;gap:8px}
.gx-tb[aria-pressed="true"]:not(.primary){background:var(--gv-blue-bg);border-color:transparent}
.gx-only{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 4px 0 12px;border-radius:16px;background:var(--gv-amber-bg);color:var(--gv-amber-ink);font-size:13px;font-weight:500}

/* status chips */
.gx-chip{--tb:var(--gv-raised);display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;flex:none;background:var(--tb);color:var(--gv-ink-3)}
.gx-chip.t-green{--tb:var(--gv-green-bg);color:var(--gv-green-ink)}
.gx-chip.t-amber{--tb:var(--gv-amber-bg);color:var(--gv-amber-ink)}
.gx-chip.t-red{--tb:var(--gv-red-bg);color:var(--gv-red-ink)}
.gx-chip.t-blue{--tb:var(--gv-blue-bg);color:var(--gv-blue-ink)}
.gx-chip.t-none{--tb:transparent;box-shadow:inset 0 0 0 1px var(--gv-line);border:0;color:var(--gv-ink-3)}
.gx-chip .i{width:12px;height:12px}
.gx-key{font-size:12px;line-height:16px;color:var(--gv-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* the publish bar: a draft exists, and this is how it goes live */
.gx-pub{display:flex;align-items:center;gap:16px;padding:10px 16px 10px 24px;background:var(--gv-blue-bg);border-bottom:1px solid color-mix(in srgb,var(--gv-blue) 30%,transparent);flex-wrap:wrap}
.gx-pub.is-err{background:var(--gv-red-bg);border-bottom-color:color-mix(in srgb,var(--gv-red) 30%,transparent)}
.gx-pub.is-err .gx-pub-ic{color:var(--gv-red-ink)}
.gx-pub-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gv-surface);color:var(--gv-blue-ink);flex:none}
.gx-pub-t{display:flex;flex-direction:column;min-width:0;flex:1 1 280px}
.gx-pub-t b{font-size:14px;line-height:20px;font-weight:500;color:var(--gv-ink)}
.gx-pub-t span{font-size:13px;line-height:18px;color:var(--gv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-pr{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--gv-ink-2)}
.gx-pr .i{width:16px;height:16px}
.gx-pr.is-ok{color:var(--gv-green-ink)}
.gx-pr.is-warn{color:var(--gv-amber-ink)}
.gx-pr.is-err{color:var(--gv-red-ink)}
.gx-pub-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gx-pub-a .gv-btn.text{margin-left:0}

/* the body: the stage, and the drawer once something is selected */
.gx-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.gx-body.has-drawer{grid-template-columns:minmax(0,1fr) 400px}
.gx-stage{position:relative;overflow:hidden;min-height:0;container-type:inline-size;background-color:var(--gv-canvas);background-image:radial-gradient(var(--gv-dots) 1px,transparent 1.2px);background-size:24px 24px;cursor:grab;touch-action:none;outline:none;user-select:none;-webkit-user-select:none}
.gx-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--gv-blue)}
.gx-stage.is-panning{cursor:grabbing}
.gx-stage.is-moving{cursor:move}
.gx-world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.gx-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gv-ink-3);font-size:14px}
.gx-empty b{font-size:22px;font-weight:400;color:var(--gv-ink)}

/* Skills: labelled groups (world units: a 16px label reads 16px at 100 percent) */
.gx-group{position:absolute;border:1px solid var(--gv-line);border-radius:16px;background:color-mix(in srgb,var(--gv-surface) 72%,transparent);box-shadow:0 1px 2px rgba(60,64,67,.08)}
.gx-group.s-watch{border-color:color-mix(in srgb,var(--gv-amber) 55%,var(--gv-line))}
.gx-group.s-fail{border-color:color-mix(in srgb,var(--gv-red) 55%,var(--gv-line))}
.gx-group.is-sel{border-color:var(--gv-blue);box-shadow:0 0 0 2px var(--gv-blue)}
.gx-gh{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;height:60px;padding:0 12px 0 16px;border-bottom:1px solid var(--gv-line-2)}
.gx-gname{display:inline-flex;align-items:center;gap:10px;border:0;background:none;font:500 18px/24px var(--gv-font);color:var(--gv-ink);padding:6px 10px 6px 6px;margin-left:-6px;border-radius:8px;cursor:pointer}
.gx-gname:hover{background:var(--gv-raised)}
.gx-gic{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--gv-blue-bg);color:var(--gv-blue-ink)}
.gx-gcount{font-size:13px;color:var(--gv-ink-3);white-space:nowrap}
.gx-plus{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--gv-line);background:var(--gv-surface);color:var(--gv-blue-ink);cursor:pointer;flex:none}
.gx-plus:hover{background:var(--gv-blue-bg);border-color:transparent}
.gx-gzoom{display:none}
.gx-gwhy{font-size:13px;color:var(--gv-ink-3)}

/* actors: cards */
.gx-node{position:absolute;width:232px;min-height:76px;display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:10px;box-shadow:var(--gv-e1);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .18s ease-out,border-color .18s ease-out,opacity .2s ease-out}
.gx-node:hover{box-shadow:var(--gv-e2)}
.gx-node:focus-visible{outline:2px solid var(--gv-blue);outline-offset:2px}
.gx-node.is-sel{border-color:var(--gv-blue);box-shadow:0 0 0 2px var(--gv-blue),var(--gv-e2);z-index:2}
.gx-node.s-fail{border-color:color-mix(in srgb,var(--gv-red) 50%,var(--gv-line))}
.gx-node.s-watch{border-color:color-mix(in srgb,var(--gv-amber) 60%,var(--gv-line))}
.gx-node.is-open{background:transparent;border-style:dashed;box-shadow:none;color:var(--gv-ink-3)}
.gx-node.is-open .gx-ic{background:transparent;border:1px dashed var(--gv-line)}
.gx-node.is-open:hover{background:var(--gv-surface)}
.gx-node.is-dim{opacity:.32}
.gx-nh{display:flex;align-items:center;gap:10px;min-width:0}
.gx-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gv-raised);color:var(--gv-ink-2);flex:none}
.gx-ic.sm{width:24px;height:24px}
.gx-ic.sm .i{width:14px;height:14px}
.gx-ic.lg{width:40px;height:40px;border-radius:12px;background:var(--gv-blue-bg);color:var(--gv-blue-ink)}
.gx-node.k-ai .gx-ic{background:var(--gv-blue-bg);color:var(--gv-blue-ink)}
/* a vendor's mark on its tile replaces the line icon: the tile is the badge, so the round plate goes */
.gx-ic.gx-mk,.gx-node.k-ai .gx-ic.gx-mk{background:none;border-radius:0;color:inherit}
.gx-mk .vmark{width:32px;height:32px;border-radius:9px}
.gx-mk .vmark svg{width:20px;height:20px}
.gx-mk .vmark.vm-generic svg{width:18px;height:18px}
.gx-mk .vmark.vm-letter span{font-size:13px}
.gx-ic.lg.gx-mk .vmark{width:40px;height:40px;border-radius:11px}
.gx-ic.lg.gx-mk .vmark svg{width:24px;height:24px}
.gx-node.is-open .gx-ic.gx-mk{border:0;opacity:.6}
.gx-node.is-proposed .gx-ic.gx-mk{border:0}
.gx-nt{display:flex;flex-direction:column;min-width:0;flex:1}
.gx-nt b{font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-nt span{font-size:12px;line-height:16px;color:var(--gv-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-nf{display:flex;align-items:center;gap:8px;min-width:0;padding-left:42px}
/* In and Out rows: only when zoomed in */
.gx-ports{display:none;grid-template-columns:1fr 1fr;gap:12px;margin:4px -12px -10px;padding:8px 12px 10px;border-top:1px solid var(--gv-line-2)}
.gx-pcol{display:flex;flex-direction:column;gap:3px;min-width:0}
.gx-ph{font-size:11px;line-height:14px;font-weight:500;color:var(--gv-ink-3);letter-spacing:.02em}
.gx-port{position:relative;padding:0 2px;font-size:12px;line-height:17px;color:var(--gv-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-port.more{color:var(--gv-ink-3)}
.gx-pcol.in .gx-port:not(.more)::before,.gx-pcol.out .gx-port:not(.more)::after{content:"";display:inline-block;box-sizing:border-box;width:8px;height:8px;border-radius:50%;margin:0 6px 0 0;vertical-align:0;background:var(--gv-surface);border:1.5px solid var(--gv-blue)}
.gx-pcol.out{text-align:right}
.gx-pcol.out .gx-port:not(.more)::after{margin:0 0 1px 6px}

/* the grid core */
.gx-core{position:absolute;display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--gv-surface);border:1px solid color-mix(in srgb,var(--gv-blue) 35%,var(--gv-line));border-radius:20px;box-shadow:var(--gv-e2);font:inherit;color:inherit;text-align:left;cursor:pointer;z-index:1}
.gx-core:hover{box-shadow:0 0 0 4px var(--gv-blue-bg),var(--gv-e2)}
.gx-core.is-sel{border-color:var(--gv-blue);box-shadow:0 0 0 2px var(--gv-blue),var(--gv-e2)}
.gx-ring{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gv-raised);flex:none}
.gx-ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.gx-ct b{font-size:18px;line-height:24px;font-weight:500}
.gx-ct > span{font-size:12.5px;line-height:16px;color:var(--gv-ink-3)}
.gx-cf{display:flex;align-items:center;gap:8px;margin-top:6px}

/* edges */
.gx-edges{position:absolute;overflow:visible;pointer-events:none}
.gx-e{pointer-events:auto;cursor:pointer;outline:none}
.gx-e .hit{fill:none;stroke:transparent;stroke-width:18}
.gx-e .ln{fill:none;stroke:var(--gv-edge);stroke-width:2;stroke-linecap:round;transition:stroke .18s ease-out}
.gx-e.skill .ln{stroke-width:3}
.gx-e.member .ln{stroke-dasharray:6 6}
.gx-e.s-watch .ln{stroke:color-mix(in srgb,var(--gv-amber) 75%,var(--gv-edge))}
.gx-e.s-fail .ln{stroke:var(--gv-red)}
.gx-e:hover .ln,.gx-e:focus-visible .ln,.gx-e.is-on .ln{stroke:var(--gv-blue);stroke-width:3.5}
.gx-flow{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:8 12;opacity:.85}
.gx-flow.f-active{stroke:var(--gv-blue);animation:gvflow 1.1s linear infinite}
.gx-flow.f-held{stroke:var(--gv-amber);stroke-dasharray:none;animation:gvheld 1.6s ease-in-out infinite}
.gx-flow.f-proven{stroke:var(--gv-green);stroke-dasharray:none;stroke-width:3.5}
@keyframes gvflow{to{stroke-dashoffset:-40}}
@keyframes gvheld{50%{opacity:.4}}
/* a publish spreading: one pulse from the grid core to each actor it changes, a ring as it lands, then a quiet chip */
.gx-spread{fill:none;stroke:var(--gv-blue);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:.22 1.3;stroke-dashoffset:.22;opacity:0;animation:gxspread 1.3s cubic-bezier(.45,0,.3,1) both;animation-delay:calc(var(--i) * 160ms)}
@keyframes gxspread{0%{stroke-dashoffset:.22;opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
/* the landing ring rides its own layer, so a selected or active card keeps its ring underneath */
.gx-node.is-taught::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;animation:gxtaught 1.2s ease-out 1.05s both}
@keyframes gxtaught{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gv-blue) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){.gx-spread{display:none}.gx-node.is-taught::after{animation:none}}
.gx-newi{height:20px;padding:0 7px;font-size:11.5px}
.gx-node.a-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--gv-blue) 55%,transparent),var(--gv-e1)}
.gx-node.a-held{box-shadow:0 0 0 2px var(--gv-amber),var(--gv-e1)}
.gx-node.a-proven{box-shadow:0 0 0 2px var(--gv-green),var(--gv-e1)}

/* semantic zoom: company. The Skills read as big labelled regions; each actor is a quiet block, colored only when it needs someone */
.gx[data-z="company"] .gx-gh{display:none}
.gx[data-z="company"] .gx-gzoom{display:flex;position:absolute;inset:0;z-index:3;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;padding:48px 56px;border:0;border-radius:16px;background:var(--gv-surface);font:inherit;color:var(--gv-ink);text-align:left;cursor:zoom-in}
.gx[data-z="company"] .gx-gzoom:hover{background:color-mix(in srgb,var(--gv-blue-bg) 70%,transparent)}
.gx[data-z="company"] .gx-gzoom:focus-visible{outline:6px solid var(--gv-blue);outline-offset:4px}
.gx-gzoom b{font-size:76px;line-height:88px;font-weight:400;letter-spacing:-.01em}
.gx-gbig{display:flex;align-items:center;gap:20px;font-size:40px;line-height:48px;color:var(--gv-ink-2)}
.gx-gbig .gx-chip{height:56px;padding:0 24px;border-radius:28px;font-size:34px}
.gx-gzoom .gx-gwhy{font-size:34px;line-height:44px;max-width:28ch}
.gx[data-z="company"] .gx-node{min-height:76px;background:var(--gv-raised);border-color:transparent;box-shadow:none}
.gx[data-z="company"] .gx-node > *{visibility:hidden}
.gx[data-z="company"] .gx-node.s-fail{background:var(--gv-red-bg);border:4px solid var(--gv-red)}
.gx[data-z="company"] .gx-node.s-watch{background:var(--gv-amber-bg);border:4px solid var(--gv-amber)}
.gx[data-z="company"] .gx-node.is-open{background:transparent;border:3px dashed var(--gv-line)}
/* Live activity reads at company zoom too: in motion blue, held amber, proven green */
.gx[data-z="company"] .gx-node.a-active{background:var(--gv-blue-bg);border:4px solid var(--gv-blue)}
.gx[data-z="company"] .gx-node.a-held{background:var(--gv-amber-bg);border:4px solid var(--gv-amber)}
.gx[data-z="company"] .gx-node.a-proven{background:var(--gv-green-bg);border:4px solid var(--gv-green)}
.gx[data-z="company"] .gx-e.skill .ln{stroke-width:9}
.gx[data-z="company"] .gx-e.member .ln{stroke-width:5;stroke-dasharray:14 12}
/* zoomed out, a card is its actor's name, big, on its status color; a flow keeps its header, big */
.gx[data-z="company"] .gx-node{justify-content:center;padding:8px 16px}
.gx[data-z="company"] .gx-node > .gx-nh{visibility:visible}
.gx[data-z="company"] .gx-node > :not(.gx-nh),.gx[data-z="company"] .gx-nh .gx-ic,.gx[data-z="company"] .gx-nt span{display:none}
.gx[data-z="company"] .gx-nt b{font-size:28px;line-height:34px;color:var(--gv-ink-2)}
.gx[data-z="company"] .gx-node.s-fail .gx-nt b{color:var(--gv-red-ink)}
.gx[data-z="company"] .gx-node.s-watch .gx-nt b{color:var(--gv-amber-ink)}
.gx[data-z="company"] .gx-node.is-open .gx-nt b{color:var(--gv-ink-3)}
.gx[data-mode="flows"][data-z="company"] .gx-gzoom{display:none}
.gx[data-mode="flows"][data-z="company"] .gx-gh{display:flex;height:76px;gap:16px;border:0}
.gx[data-mode="flows"][data-z="company"] .gx-gname{font-size:40px;line-height:48px}
.gx[data-mode="flows"][data-z="company"] .gx-gic,.gx[data-mode="flows"][data-z="company"] .gx-plus,.gx[data-mode="flows"][data-z="company"] .gx-gh .gx-chip.t-blue,.gx[data-mode="flows"][data-z="company"] .gx-gh .gx-chip.t-muted{display:none}
.gx[data-mode="flows"][data-z="company"] .gx-gh .gx-chip{height:40px;padding:0 16px;border-radius:20px;font-size:24px}
.gx[data-mode="flows"][data-z="company"] .gx-gcount{font-size:26px}
.gx[data-z="company"] .gx-kind{font-size:64px;line-height:72px;transform:translateY(-48px)}
.gx[data-z="company"] .gx-kind span{font-size:48px;padding:0 20px;height:64px;border-radius:32px}
.gx[data-z="company"] .gx-e.handoff .ln{stroke-width:6}
.gx[data-z="company"] .gx-when{display:none}
.gx[data-z="company"] .gx-core{flex-direction:column;justify-content:center;gap:8px;padding:12px}
.gx[data-z="company"] .gx-ct > span,.gx[data-z="company"] .gx-cf{display:none}
.gx[data-z="company"] .gx-ct b{font-size:40px;line-height:44px}
.gx[data-z="company"] .gx-ring{width:72px;height:72px}
.gx[data-z="company"] .gx-ring svg{width:56px;height:56px}
.gx-gmix{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:auto;font-size:32px;line-height:40px;color:var(--gv-ink-2)}
.gx-mx{display:inline-flex;align-items:center;gap:14px}
.gx-mx i{width:24px;height:24px;border-radius:50%;background:var(--gv-edge)}
.gx-mx i.d-ok{background:var(--gv-green)}
.gx-mx i.d-watch{background:var(--gv-amber)}
.gx-mx i.d-fail{background:var(--gv-red)}
.gx-mx i.d-none{background:transparent;box-shadow:inset 0 0 0 3px var(--gv-edge)}
/* semantic zoom: ports */
.gx[data-z="ports"] .gx-ports{display:grid}

/* canvas furniture: zoom, level, minimap, legend */
.gx-zoom{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:12px;box-shadow:var(--gv-e1);overflow:hidden;z-index:5}
.gx-zb{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:var(--gv-ink-2);cursor:pointer}
.gx-zb:hover{background:var(--gv-raised);color:var(--gv-ink)}
.gx-zb + .gx-zl,.gx-zl + .gx-zb,.gx-zb + .gx-zb{border-top:1px solid var(--gv-line-2)}
.gx-zl{width:40px;padding:6px 0;text-align:center;font-size:11px;font-weight:500;color:var(--gv-ink-3)}
.gx-mini{position:absolute;right:16px;bottom:16px;padding:6px;background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:12px;box-shadow:var(--gv-e1);z-index:5;cursor:pointer}
.gx-mini svg{display:block}
.gx-mini .mg{fill:var(--gv-canvas);stroke:var(--gv-line);stroke-width:1}
.gx-mini .mg.s-fail{stroke:var(--gv-red)}
.gx-mini .mg.s-watch{stroke:var(--gv-amber)}
.gx-mini .mn{fill:var(--gv-edge)}
.gx-mini .mn.s-fail{fill:var(--gv-red)}
.gx-mini .mn.s-watch{fill:var(--gv-amber)}
.gx-mini .mn.s-none{fill:none;stroke:var(--gv-edge);stroke-width:.6}
.gx-mini .mc{fill:var(--gv-blue)}
.gx-mini .mv{fill:color-mix(in srgb,var(--gv-blue) 10%,transparent);stroke:var(--gv-blue);stroke-width:1.5}
.gx-legend{position:absolute;left:72px;bottom:16px;display:flex;gap:6px;align-items:center;padding:6px 8px;background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:12px;z-index:5}
/* a narrow canvas (the drawer and the chat both open) drops the minimap, then the legend, before they overlap */
@container (max-width:700px){.gx-mini{display:none}}
@container (max-width:470px){.gx-legend{display:none}}

/* the editor drawer (a Material side sheet) */
.gx-drawer{display:flex;flex-direction:column;min-height:0;background:var(--gv-surface);border-left:1px solid var(--gv-line);animation:gvin .28s cubic-bezier(.16,1,.3,1)}
@keyframes gvin{from{opacity:0;transform:translateX(16px)}}
.gx-dh{display:flex;align-items:flex-start;gap:12px;padding:16px 8px 12px 24px}
.gx-dt{flex:1;min-width:0}
.gx-dt h2{margin:0;font-size:20px;line-height:28px;font-weight:400;color:var(--gv-ink);overflow-wrap:anywhere}
.gx-dt p{margin:0;font-size:13px;line-height:20px;color:var(--gv-ink-3)}
.gx-dst{display:flex;align-items:center;gap:8px;margin-top:6px!important;flex-wrap:wrap}
.gx-x{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--gv-ink-3);cursor:pointer;flex:none}
.gx-x:hover{background:var(--gv-raised);color:var(--gv-ink)}
.gx-x.sm{width:24px;height:24px}
.gx-x.sm .i{width:14px;height:14px}
.gx-tabs{display:flex;gap:0;padding:0 8px;border-bottom:1px solid var(--gv-line);overflow-x:auto;scrollbar-width:none;flex:none}
.gx-tabs button{position:relative;height:44px;padding:0 10px;border:0;background:none;font:500 14px/1 var(--gv-font);color:var(--gv-ink-3);cursor:pointer;white-space:nowrap}
.gx-tabs button:hover{color:var(--gv-ink);background:var(--gv-raised)}
.gx-tabs button[aria-selected="true"]{color:var(--gv-blue-ink)}
.gx-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--gv-blue)}
.gx-db{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--gv-line) transparent;padding-bottom:24px}
.gx-db .gv-sec h3{margin:0 0 8px}
.gx-db .gv-sec p{margin:0}
.gx-tok{padding:16px 16px 0}
.gx-tok .tokcard{margin:0}
.gx-note{font-size:12.5px!important;line-height:18px!important;color:var(--gv-ink-3)!important;margin-top:6px!important}
.gx-note.pad{padding:0 24px}
.gx-alert{display:flex;gap:12px;align-items:flex-start;margin:12px 16px 0;padding:12px 16px;border-radius:8px;background:var(--gv-amber-bg);color:var(--gv-amber-ink);font-size:13.5px;line-height:20px}
.gx-alert.s-fail{background:var(--gv-red-bg);color:var(--gv-red-ink)}
.gx-alert .i{flex:none;margin-top:2px}
.gx-alert div{color:var(--gv-ink-2)}
.gx-alert b{color:inherit}
.gx-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gx-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px 0;flex-wrap:wrap}
.gx-pl{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gx-pl h4{margin:0;font-size:14px;font-weight:500;color:var(--gv-ink)}
.gx-pl > div > span{font-size:12px;color:var(--gv-ink-3)}
.gx-pl ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.gx-pl li{font-size:13px!important;line-height:18px!important;padding:4px 8px;border-radius:6px;background:var(--gv-raised)}
.gx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gx-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic name chip" "ic sub chip";align-items:center;column-gap:12px;width:100%;padding:8px 8px;margin:0 -8px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:calc(100% + 16px)}
.gx-li:hover{background:var(--gv-raised)}
.gx-li .gx-ic{grid-area:ic}
.gx-li b{grid-area:name;font-size:14px;line-height:20px;font-weight:500;color:var(--gv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-li > span:not(.gx-ic):not(.gx-chip){grid-area:sub;font-size:12px;line-height:16px;color:var(--gv-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-li .gx-chip{grid-area:chip}
.gx-li:not(:has(.gx-ic)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name chip" "sub chip"}
.gx-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.gx-nums div{padding:10px 12px;border-radius:8px;background:var(--gv-raised)}
.gx-nums dt{font-size:12px;color:var(--gv-ink-3)}
.gx-nums dd{margin:2px 0 0;font-size:22px;line-height:28px;color:var(--gv-ink)}
.gx-dl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 12px;margin:0;font-size:14px}
.gx-dl dt{color:var(--gv-ink-3)}
.gx-dl dd{margin:0;color:var(--gv-ink-2)}
.gx-sl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.gx-sl li{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gx-vl{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.gx-vl li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:8px;background:var(--gv-raised)}
.gx-vl li > div{display:flex;flex-direction:column;min-width:0}
.gx-vl li span{font-size:12.5px;color:var(--gv-ink-3)}
.gx-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gx-rule{padding:12px 16px;border:1px solid var(--gv-line);border-radius:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.gx-rule.is-draft{border-color:var(--gv-blue);box-shadow:0 0 0 1px var(--gv-blue)}
.gx-rh{display:flex;align-items:center;gap:8px;width:100%}
.gx-rh b{font-size:14px;font-weight:500;color:var(--gv-ink)}
.gx-rh .gx-chip{margin-left:auto}
.gx-rd{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--gv-ink)!important}
.gx-rw{font-size:13px!important;color:var(--gv-ink-3)!important;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--gv-ink-3) 50%,transparent)}
.gx-rw .gx-k{text-decoration:none;display:inline-block;margin-right:8px}
.gx-k{font-size:12px;font-weight:500;color:var(--gv-ink-3)}
.gx-edit{display:flex;flex-direction:column;gap:6px;width:100%}
.gx-ta,.gx-in{width:100%;font:400 14px/20px var(--gv-font);color:var(--gv-ink);background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:8px;padding:8px 12px;box-sizing:border-box}
.gx-ta{resize:vertical;min-height:88px}
.gx-in{height:40px;padding:0 12px;margin-top:6px}
.gx-ta:focus,.gx-in:focus{outline:none;border-color:var(--gv-blue);box-shadow:0 0 0 1px var(--gv-blue)}
.gx-edit .gx-acts{justify-content:flex-end;width:100%;margin-top:4px}
.gx-ctx{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gx-ctx li{display:flex;flex-direction:column;gap:2px}
.gx-ctx b{font-size:14px;font-weight:500;color:var(--gv-ink)}
.gx-ctx span{font-size:13px;color:var(--gv-ink-2)}
.gx-form fieldset{border:0;margin:0;min-width:0}
.gx-form legend{padding:0;margin-bottom:8px}
.gx-fields{display:flex;flex-direction:column;gap:14px}
.gx-fields label{display:flex;flex-direction:column}
.gx-fields small{font-size:12px;color:var(--gv-ink-3);margin-top:4px;font-weight:400}
.gx-radio{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--gv-line);border-radius:8px;margin-top:6px;cursor:pointer}
.gx-radio:has(input:checked){border-color:var(--gv-blue);background:var(--gv-blue-bg)}
.gx-radio span{display:flex;flex-direction:column}
.gx-radio b{font-size:14px;font-weight:500;color:var(--gv-ink)}
.gx-radio small{font-size:12px;color:var(--gv-ink-3)}
.gx-radio input,.gx-ck input{accent-color:var(--gv-blue);margin-top:3px}
.gx-scopes{display:grid;grid-template-columns:1fr;gap:4px}
.gx-ck{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--gv-ink-2);padding:4px 0;cursor:pointer}

@media (max-width:1280px){
  .gx-body.has-drawer{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:900px){
  .gx{height:calc(100dvh - 56px)}
  .gx-top{padding:8px 12px;gap:8px}
  .gx-crumbs{font-size:14px;flex:1;min-width:0}
  .gx-cr{max-width:140px;padding:4px 6px}
  .gx-tools .gx-chip{display:none}
  .gx-pub{padding:10px 12px;gap:10px}
  .gx-body.has-drawer{grid-template-columns:minmax(0,1fr)}
  .gx-drawer{position:fixed;left:0;right:0;bottom:0;max-height:72dvh;z-index:44;border-left:0;border-top:1px solid var(--gv-line);border-radius:16px 16px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.18);animation-name:gvup}
  @keyframes gvup{from{opacity:0;transform:translateY(24px)}}
  .gx-legend{display:none}
  .gx-zoom{left:12px;bottom:12px}
  .gx-mini{right:12px;bottom:12px;transform:scale(.8);transform-origin:right bottom}
}
@media (max-width:520px){
  .gx-mini{display:none}
  .gx-pub-a{width:100%}
  .gx-pub-a .gv-btn{flex:1;justify-content:center;padding:0 10px}
  .gx-pub-a .gate-tip{flex:1;display:flex}
  .gx-pub-a .gate-tip .gv-btn{flex:1}
  .gx-pl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gx-flow,.gx-pulse,.gx-drawer{animation:none}
}

/* the view bar: All and the flow views, and the grid document */
.gx-views{display:flex;align-items:center;gap:16px;min-height:48px;padding:0 12px 0 16px;border-bottom:1px solid var(--gv-line);background:var(--gv-surface);flex-wrap:nowrap;min-width:0}
.gx-vt{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.gx-vt button{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:0;background:none;font:500 14px/1 var(--gv-font);color:var(--gv-ink-3);cursor:pointer;white-space:nowrap}
.gx-vt button:hover{color:var(--gv-ink);background:var(--gv-raised)}
.gx-vt button[aria-selected="true"]{color:var(--gv-blue-ink)}
.gx-vt button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--gv-blue)}
.gx-vn{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--gv-raised);font-size:11.5px;color:var(--gv-ink-3)}
.gx-vt button[aria-selected="true"] .gx-vn{background:var(--gv-blue-bg);color:var(--gv-blue-ink)}

/* All: kind captions; on cards, the flows that use an actor; in a flow, the step and its rules */
.gx-kind{position:absolute;display:flex;align-items:center;gap:10px;font:400 22px/28px var(--gv-font);color:var(--gv-ink-2);white-space:nowrap;pointer-events:none}
.gx-kind span{display:inline-grid;place-items:center;height:24px;padding:0 9px;border-radius:12px;background:var(--gv-raised);font-size:13px;font-weight:500;color:var(--gv-ink-3)}
.gx-fl{display:flex;flex-wrap:wrap;gap:4px;padding-left:42px;min-width:0}
.gx-fc,.gx-rc{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:500;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gx-fc{background:var(--gv-blue-bg);color:var(--gv-blue-ink)}
.gx-fc.more{background:var(--gv-raised);color:var(--gv-ink-3)}
.gx-fc.none{background:none;box-shadow:inset 0 0 0 1px var(--gv-line);color:var(--gv-ink-3)}
.gx-rc{background:var(--gv-raised);color:var(--gv-ink-2)}
.gx-rc::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--gv-amber);margin-right:6px;flex:none}
.gx-step{display:flex;align-items:flex-start;gap:8px;padding:6px 0 0;border-top:1px solid var(--gv-line-2);margin:2px -12px 0;padding-left:12px;padding-right:12px}
.gx-sn{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:var(--gv-ink-2);color:var(--gv-surface);font-size:11px;font-weight:700;flex:none}
.gx-sa{font-size:13px;line-height:20px;font-weight:500;color:var(--gv-ink);min-width:0}
.gx-node.is-step{min-height:96px}
.gx-e.handoff .ln{stroke-width:2.5}
.gx-e.handoff.cond .ln{stroke-dasharray:7 5}
.gx-edges marker path{fill:var(--gv-edge)}
.gx-when rect{fill:var(--gv-surface);stroke:var(--gv-line)}
.gx-when text{font:500 11.5px var(--gv-font);fill:var(--gv-amber-ink);text-anchor:middle}
.gx-e:hover .gx-when rect,.gx-e.is-on .gx-when rect{stroke:var(--gv-blue)}
.gx-none{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--gv-ink-3);font-size:14px;text-align:center;padding:24px;pointer-events:none}
.gx-none b{font-size:20px;font-weight:400;color:var(--gv-ink)}

/* the drawer: flows, steps, the document, the diff */
.gx-flows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gx-flowrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--gv-line);border-radius:10px}
.gx-flowrow.is-here{border-color:var(--gv-blue);background:var(--gv-blue-bg)}
.gx-flowrow > div{display:flex;flex-direction:column;min-width:0}
.gx-flowrow b{font-size:14px;font-weight:500;color:var(--gv-ink)}
.gx-flowrow span{font-size:12.5px;color:var(--gv-ink-3)}
.gx-flowrow .gv-btn{height:32px;padding:0 12px;flex:none}
.gx-mt{margin:12px 0 6px}
.gx-sl2{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"ic name chip" "ic sub chip"!important}
.gx-sl2 .gx-sn{grid-area:ic}
.gx-errs{margin-top:12px;padding:12px 16px;border-radius:8px;background:var(--gv-red-bg);color:var(--gv-red-ink);font-size:13.5px;line-height:20px}
.gx-errs b{display:block;margin-bottom:6px}
.gx-errs ul{margin:0;padding-left:18px;color:var(--gv-ink-2)}
.gx-errs code{color:var(--gv-red-ink);font-size:12px}
.gx-ta.mono{font:12.5px/18px var(--mono);min-height:180px;white-space:pre;overflow:auto}
.gx-file{position:relative;cursor:pointer}
.gx-diff{border:1px solid var(--gv-line);border-radius:8px;overflow:auto;max-height:52vh;background:var(--gv-canvas);font:12px/18px var(--mono)}
.gx-hunk > div{display:grid;grid-template-columns:20px minmax(0,1fr);padding:0 10px 0 0;white-space:pre}
.gx-hunk > div > span{text-align:center;color:var(--gv-ink-3);user-select:none}
.gx-hunk code{font:inherit;color:var(--gv-ink-2)}
.gx-dl-add{background:var(--gv-green-bg)}
.gx-dl-add code,.gx-dl-add span{color:var(--gv-green-ink)!important}
.gx-dl-del{background:var(--gv-red-bg)}
.gx-dl-del code,.gx-dl-del span{color:var(--gv-red-ink)!important;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--gv-red-ink) 40%,transparent)}
.gx-dl-del span{text-decoration:none}
.gx-gap{height:10px;border-top:1px dashed var(--gv-line);border-bottom:1px dashed var(--gv-line);background:var(--gv-surface)}
@media (max-width:900px){.gx-views{padding:0 8px;gap:8px}.gx-vt button{padding:0 10px;height:44px}}
/* the document switcher (demo data): Demo grid or Sample company */
.gx-seg{display:inline-flex;flex:none;border:1px solid var(--gv-line);border-radius:18px;overflow:hidden;margin-right:4px}
.gx-seg button{height:32px;padding:0 14px;border:0;background:var(--gv-surface);font:500 13px/1 var(--gv-font);color:var(--gv-ink-3);cursor:pointer;white-space:nowrap}
.gx-seg button + button{border-left:1px solid var(--gv-line)}
.gx-seg button:hover{background:var(--gv-raised);color:var(--gv-ink)}
.gx-seg button[aria-pressed="true"]{background:var(--gv-blue-bg);color:var(--gv-blue-ink)}
@media (max-width:900px){.gx-seg button{padding:0 10px;font-size:12px}}

/* round 4: declared and observed edges, the metrics strip, review state, the actor tabs, checks, watch first */
.gx[data-mode="all"] .gx-e.core .ln{stroke-opacity:.45;stroke-width:1.5}
.gx-e.declared .ln{stroke-width:2.5}
.gx-e .ob{fill:none;stroke-linecap:round;stroke-opacity:.22;pointer-events:none;transition:stroke-opacity .18s ease-out}
.gx-e .ob.h-ok{stroke:var(--gv-green)}
.gx-e .ob.h-watch{stroke:var(--gv-amber)}
.gx-e .ob.h-fail{stroke:var(--gv-red)}
.gx-e .ob.h-unknown{stroke:var(--gv-blue)}
.gx-e:hover .ob,.gx-e.is-on .ob{stroke-opacity:.36}
.gx-e.observed.gap .ln{stroke:var(--gv-amber);stroke-dasharray:3 6;stroke-width:2}
.gx-e.observed:not(.gap) .ln{stroke:var(--gv-edge);stroke-width:1.5}
.gx-when.gap rect{fill:var(--gv-amber-bg);stroke:color-mix(in srgb,var(--gv-amber) 60%,transparent)}
.gx-when.gap text{fill:var(--gv-amber-ink)}
.gx[data-z="company"] .gx-e .ob{stroke-opacity:.3}
.gx-ms{display:flex;gap:10px;padding-left:42px;font-size:11.5px;line-height:16px;color:var(--gv-ink-3);white-space:nowrap;overflow:hidden}
.gx-ms b{font-weight:500;color:var(--gv-ink-2)}
.gx-node.is-proposed{background:transparent;border:1.5px dashed var(--gv-blue);box-shadow:none}
.gx-node.is-proposed .gx-ic{background:transparent;border:1px dashed var(--gv-blue);color:var(--gv-blue-ink)}
.gx-node.is-proposed .gx-chip{box-shadow:inset 0 0 0 1px var(--gv-blue);color:var(--gv-blue-ink)}
.gx[data-z="company"] .gx-node.is-proposed{border:3px dashed var(--gv-blue);background:transparent}
.gx-pr.is-watch{color:var(--gv-blue-ink);max-width:340px}
.gx-pr .i{flex:none}
.gx-pub.is-live{background:var(--gv-green-bg);border-bottom-color:color-mix(in srgb,var(--gv-green) 30%,transparent)}
.gx-pub.is-live .gx-pub-ic{color:var(--gv-green-ink)}
.gx-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.gx-checks li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:18px;color:var(--gv-ink-2)}
.gx-checks .gx-chip{margin-top:-1px;min-width:62px;justify-content:center}
.gx-hops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gx-hop{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--gv-line);border-radius:8px}
.gx-hop > div{display:flex;flex-direction:column;flex:1;min-width:0}
.gx-hop b{font-size:13.5px;font-weight:500;color:var(--gv-ink)}
.gx-hop span{font-size:12px;color:var(--gv-ink-3)}
.gx-nums dd.sm{font-size:15px;line-height:28px}
.gx-trace{list-style:none;margin:8px 0 0;padding:0;position:relative;display:flex;flex-direction:column}
.gx-trace li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:7px 0 7px 14px;border-left:1px solid var(--gv-line);font-size:13px;line-height:18px;color:var(--gv-ink-2);position:relative}
.gx-trace li::before{content:"";position:absolute;left:-4.5px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--gv-surface);box-shadow:inset 0 0 0 2px var(--gv-edge)}
.gx-trace li.is-me::before{box-shadow:inset 0 0 0 2px var(--gv-blue)}
.gx-trace li b{font-weight:500;color:var(--gv-ink)}
.gx-trace li b .i{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.gx-tt{font-size:11.5px;color:var(--gv-ink-3)}
.gx-receipt{margin-top:4px;border-radius:0 8px 8px 0;border-left-color:var(--gv-green)!important;background:var(--gv-green-bg)}
.gx-receipt::before{background:var(--gv-green)!important;box-shadow:none!important}
.gx-receipt.bad{border-left-color:var(--gv-red)!important;background:var(--gv-red-bg)}
.gx-receipt.none{border-left-color:var(--gv-line)!important;background:var(--gv-raised)}
.gx-receipt.none::before{background:var(--gv-edge)!important}
.gx-receipt.open{border-left-color:var(--gv-amber)!important;background:var(--gv-amber-bg)}
.gx-receipt.open::before{background:var(--gv-amber)!important}
.gx-try{margin-top:12px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:8px;background:var(--gv-raised);font-size:13.5px;line-height:20px;color:var(--gv-ink-2)}
.gx-try b{color:var(--gv-ink)}
.gx-try.approved{background:var(--gv-green-bg)}
.gx-try.needs_approval{background:var(--gv-amber-bg)}
.gx-try.declined,.gx-try.none{background:var(--gv-red-bg)}
.gx-scopelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gx-scopelist li{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--gv-ink-2)}
.gx-scopelist code{font-size:11.5px;color:var(--gv-ink-3)}
.gx-sl li{flex-wrap:wrap}
.gx-teachcue{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:500;background:var(--gv-blue-bg);color:var(--gv-blue-ink);padding:0 12px;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:32px}
.gx-teachcue:hover{box-shadow:var(--gv-e1)}

.gv-btn:disabled,.gv-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;box-shadow:none}
.gx-tabs button{padding:0 6px;font-size:13.5px}
/* a live session's controls in the drawer (Mission Control's, on the canvas) */
.gx-live{margin-top:14px;padding-top:12px;border-top:1px solid var(--gv-line-2);display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.gx-live .acc-top{flex-direction:column;align-items:flex-start;gap:8px}
.gx-live .acc-top .meta{flex-wrap:wrap}
.gx-live .acc-cols{grid-template-columns:1fr}
.gx-live .path{overflow-x:auto}
/* What it says (a voice agent's opening and instructions), and two sessions side by side by pinned rulebook version */
.gx-says-row{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.gx-says-row p{margin:0}
.gx-says-q{display:block;font-size:14px;line-height:21px;color:var(--gv-ink)}
.gx-says-draft{padding:12px 12px 2px;margin:0 0 12px;border-radius:8px;background:var(--gv-blue-bg)}
.gx-pins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gx-pin{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--gv-line);border-radius:8px;min-width:0;font-size:13px}
.gx-pin p{margin:0;display:flex;flex-direction:column;gap:2px}

/* The learning pipeline (js/views/grid-learning.js): a session's goods and bads, what is working, and the five steps.
   Same chips, rows, and numbers as the rest of the drawer; green means good or proven, red bad, blue a step reached. */
.gx-db .gl-banner{display:flex;gap:8px;align-items:center;margin:12px 24px 0;padding:8px 12px;border-radius:8px;border:1px solid var(--gv-line);font-size:12.5px;line-height:18px;color:var(--gv-ink-3)}
.gl-actor + .gl-actor{margin-top:12px}
.gl-actor h4,.gl-col h4,.gl-gh{margin:0 0 6px;font-size:13px;line-height:18px;font-weight:500;color:var(--gv-ink)}
.gl-gh{margin-top:12px;color:var(--gv-ink-3);font-size:12px}
.gl-fl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gl-f{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:start}
.gl-f .gx-chip{justify-content:center}
.gl-f div{display:flex;flex-direction:column;min-width:0}
.gl-f b{font-weight:500;color:var(--gv-ink);font-size:14px;line-height:20px}
.gl-f span{font-size:12.5px;line-height:18px;color:var(--gv-ink-3)}
.gl-rc{margin-top:12px}
.gx-trace li.is-ev::before{background:var(--gv-blue);box-shadow:none}
.gl-evc{height:18px;font-size:11px;margin-left:4px;vertical-align:1px}
/* Instant QA (a session's scores): the headline, each score's ms, one row per finding with its Evidence link */
.gl-qa{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--gv-line);border-radius:10px;background:var(--gv-raised)}
.gl-qa p{margin:0}
.gl-nw{white-space:nowrap}
.gl-qa-big{font-size:15px;line-height:22px;color:var(--gv-ink)}
.gl-qa-big b{font-weight:600;color:var(--gv-green-ink);font-variant-numeric:tabular-nums}
.gl-runs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px}
.gl-runs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gl-runs li{display:inline-flex;gap:6px;align-items:center;height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--gv-line);background:var(--gv-surface);font-size:12px;color:var(--gv-ink-3)}
.gl-runs li b{font-weight:600;color:var(--gv-ink);font-variant-numeric:tabular-nums}
.gl-runs li.none b{color:var(--gv-ink-3)}
.gl-f .gl-ms{font-variant-numeric:tabular-nums}
.gl-evb{align-self:center;height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--gv-line);background:transparent;color:var(--gv-blue-ink);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.gl-evb:hover{background:var(--gv-blue-bg)}
.gl-evb:focus-visible{outline:2px solid var(--gv-blue);outline-offset:1px}
.gl-unsure{margin:12px 0 0}
.gl-2nd{margin:8px 0 0;font-size:12.5px;line-height:18px;color:var(--gv-amber-ink)}
.gl-2nd b{font-weight:600}
.gx-trace li.is-flash{background:var(--gv-blue-bg);transition:background .2s}
@media (prefers-reduced-motion:reduce){.gx-trace li.is-flash{transition:none}}
.gl-cols{display:grid;grid-template-columns:1fr;gap:12px}
.gl-col ul,.gl-offers,.gl-actors,.gl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gl-wl,.gl-row{display:flex;align-items:center;gap:8px;width:calc(100% + 16px);margin:0 -8px;padding:6px 8px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.gl-wl:hover,.gl-row:hover{background:var(--gv-raised)}
.gl-wl b,.gl-row b{font-weight:500;font-size:14px;line-height:20px;color:var(--gv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gl-wl span,.gl-n{font-size:12px;color:var(--gv-ink-3);white-space:nowrap}
.gl-wl > span:last-child{margin-left:auto}
.gl-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--gv-green)}
.gl-dot.bad{background:var(--gv-red)}
.gl-offers .gl-wl{display:grid;grid-template-columns:minmax(0,1fr) auto 80px 40px;gap:10px}
.gl-offers em{font-style:normal;font-size:13px;color:var(--gv-ink);text-align:right}
.gl-bar{height:6px;border-radius:3px;background:var(--gv-raised);overflow:hidden}
.gl-bar i{display:block;height:100%;background:var(--gv-green);border-radius:3px}
.gl-actors li{display:grid;grid-template-columns:minmax(0,1fr) 96px auto;gap:10px;align-items:center;padding:6px 0;font-size:13px}
.gl-actors b{font-weight:500;color:var(--gv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-actors li > span:last-child{font-size:12px;color:var(--gv-ink-3);white-space:nowrap}
.gl-split{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--gv-raised);gap:2px}
.gl-split i.good{background:var(--gv-green)}
.gl-split i.bad{background:var(--gv-red)}
.gl-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px!important;color:var(--gv-ink-3)!important}
.gl-legend > span{display:inline-flex;align-items:center;gap:4px}
.gl-num{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--gv-raised);color:var(--gv-ink-3);font-size:11px;font-weight:500;flex:none}
.gl-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;grid-template-areas:"dot name chip" ". meta meta";column-gap:10px;row-gap:2px}
.gl-row .gl-dot{grid-area:dot}
.gl-row b{grid-area:name}
.gl-row .gx-chip{grid-area:chip}
.gl-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.gl-meta .gx-chip{height:20px;font-size:11.5px}
.gl-row.is-open{background:var(--gv-blue-bg)}
/* Ask why: a quiet text button beside a lesson's row; it opens the docked chat with the lesson's facts */
.gl-li-why{display:flex;flex-wrap:wrap;align-items:center;column-gap:2px}
.gl-li-why > .gl-row,.gl-li-why > .gl-wl{flex:1 1 0;width:auto;margin-right:0;min-width:0}
.gl-li-why > .gl-pipe{flex-basis:100%}
.gv-btn.text.gl-why{flex:none;height:28px;margin:0;padding:0 8px;font-size:12px;color:var(--gv-blue)}
.gv-st .gl-why{margin-left:auto}
.gl-strip{display:inline-flex;align-items:center;gap:3px;flex:none}
.gl-strip i{width:6px;height:6px;border-radius:50%;background:var(--gv-line)}
.gl-strip i.on{background:var(--gv-blue)}
/* a pattern that just changed: its steps light one after another, once */
.gl-strip i.lit{animation:gllit .36s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 280ms)}
@keyframes gllit{0%{background:var(--gv-line);transform:scale(1)}55%{background:var(--gv-blue);transform:scale(1.7)}100%{background:var(--gv-blue);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gl-strip i.lit{animation:none}}
.gl-strip em{font-style:normal;font-size:11.5px;color:var(--gv-ink-3);margin-left:4px;white-space:nowrap}
.gl-pipe{margin:4px 0 12px;padding:4px 0 0 4px}
.gl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gl-steps li{position:relative;padding:0 0 14px 30px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.gl-steps li::before{content:"";position:absolute;left:8.5px;top:20px;bottom:0;width:1px;background:var(--gv-line)}
.gl-steps li:last-child::before{display:none}
.gl-steps h4{position:relative;margin:0 0 0 -30px;display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;font-weight:500;color:var(--gv-ink-3)}
.gl-steps li.done h4,.gl-steps li.now h4{color:var(--gv-ink)}
.gl-steps li.done .gl-num{background:var(--gv-blue-bg);color:var(--gv-blue-ink)}
.gl-steps li.now .gl-num{background:var(--gv-blue);color:var(--on-primary)}
.gl-steps p{font-size:13px!important;line-height:19px!important}
.gl-steps .gv-diff{width:100%}
.gl-ses{display:flex;flex-wrap:wrap;gap:0 8px}
.gl-ses .gv-btn.text{font-family:var(--mono);font-size:12px}
.gl-two{grid-template-columns:1fr 1fr;width:100%}
.gl-two .gl-sub{font-size:12px;line-height:16px;color:var(--gv-ink-3)}
/* speed receipts: measured from the API's timestamps, quiet, numbers aligned */
.gl-speed{margin:0;color:var(--gv-ink-3);font-variant-numeric:tabular-nums}
.gl-steps p.gl-speed{font-size:12.5px!important;line-height:18px!important}
.gx-pub-t [data-ago]{font-variant-numeric:tabular-nums}

/* now playing: the live session as a slim bar along the bottom of the canvas; the canvas furniture moves up above it */
.gx-np{position:absolute;left:16px;right:16px;bottom:16px;z-index:6;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 8px;background:var(--gv-surface);border:1px solid var(--gv-line);border-radius:14px;box-shadow:var(--gv-e2);font:inherit;color:inherit;text-align:left;cursor:pointer;animation:gxnpin .28s cubic-bezier(.16,1,.3,1)}
.gx-np:hover{border-color:var(--gv-blue)}
.gx-np:focus-visible{outline:2px solid var(--gv-blue);outline-offset:2px}
@keyframes gxnpin{from{opacity:0;transform:translateY(8px)}}
.gx-np-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--gv-blue-bg);color:var(--gv-blue-ink);flex:none}
.gx-np-ic .i{width:18px;height:18px}
.gx-np-t{display:flex;flex-direction:column;min-width:0;flex:0 1 auto}
.gx-np-t b{font-size:14px;font-weight:500;line-height:20px;color:var(--gv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-np-t > span{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--gv-ink-3);white-space:nowrap}
.gx-np-clock{font-size:14px;font-weight:500;line-height:20px;color:var(--gv-ink);font-variant-numeric:tabular-nums;flex:none;min-width:40px}
.gx-np-chips{display:flex;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden}
.gx-np-open{display:inline-flex;align-items:center;gap:2px;margin-left:auto;font-size:13px;font-weight:500;color:var(--gv-blue);flex:none}
.gx-np-open .i{width:16px;height:16px}
.gx-stage.has-np .gx-zoom{bottom:84px}
.gx-stage.has-np .gx-legend{bottom:84px}
.gx-stage.has-np .gx-mini{bottom:84px}
@media (prefers-reduced-motion:reduce){.gx-np{animation:none}}
@media (max-width:900px){.gx-np{left:12px;right:12px;bottom:12px}.gx-stage.has-np .gx-zoom{bottom:76px}.gx-stage.has-np .gx-mini{bottom:76px}}
@media (max-width:520px){
  /* a phone: who and how long on the first line, the chips on their own line under them */
  .gx-np{flex-wrap:wrap;gap:6px 10px;padding-right:8px}
  .gx-np-t{flex:1 1 0}
  .gx-np-chips{order:9;flex-basis:100%;padding-left:46px}
  .gx-np-chips:empty{display:none}
  .gx-np-open{font-size:0;margin-left:0}
  .gx-np-open .i{width:20px;height:20px}
  .gx-stage.has-np .gx-zoom{bottom:104px}
  .gx-stage.has-np:has(.gx-np-chips:empty) .gx-zoom{bottom:76px}
}
/* The user agent's chat line (app.css .ua) is fixed at the bottom of every page: the canvas's live bar, zoom, legend,
   and minimap sit above it, each lifted by the line's height and its gap. */
body.ua-on .gx-np{bottom:84px}
body.ua-on .gx-zoom,body.ua-on .gx-legend,body.ua-on .gx-mini{bottom:84px}
body.ua-on .gx-stage.has-np .gx-zoom,body.ua-on .gx-stage.has-np .gx-legend,body.ua-on .gx-stage.has-np .gx-mini{bottom:152px}
@media (max-width:900px){
  body.ua-on .gx-np{bottom:76px}
  body.ua-on .gx-zoom,body.ua-on .gx-legend,body.ua-on .gx-mini{bottom:76px}
  body.ua-on .gx-stage.has-np .gx-zoom,body.ua-on .gx-stage.has-np .gx-legend,body.ua-on .gx-stage.has-np .gx-mini{bottom:140px}
}
@media (max-width:520px){
  body.ua-on .gx-stage.has-np .gx-zoom{bottom:168px}
  body.ua-on .gx-stage.has-np:has(.gx-np-chips:empty) .gx-zoom{bottom:140px}
}

/* the flow filter (js/grid-flows.js): All of the grid, then each flow of record; a pick lights its steps in order over All */
.gx-flowpick{margin-left:auto;margin-right:0;max-width:min(560px,55%);overflow-x:auto;scrollbar-width:none}
.gx-flowpick button{flex:none}
.gx-flowpick button[aria-pressed="true"]{font-weight:600}
.gx-node.in-flow,.gx-core.in-flow{border-color:var(--gv-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--gv-blue) 45%,transparent),var(--gv-e2);z-index:2}
.gx-core.is-dim{opacity:.32}
.gx-e.is-dim{opacity:.18;pointer-events:none}
.gx-node.in-flow .gx-step{border-top-color:color-mix(in srgb,var(--gv-blue) 30%,var(--gv-line-2))}
.gx-node.in-flow .gx-sn{background:var(--gv-blue);color:var(--on-primary)}
.gx-node.in-flow .gx-sa{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gx-fsn{position:absolute;top:-12px;left:-12px;display:flex;gap:4px;z-index:3;pointer-events:none}
.gx-fsn i{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gv-blue);color:var(--on-primary);font:700 12px/1 var(--gv-font);font-style:normal;box-shadow:0 0 0 2px var(--gv-surface)}
.gx-fe .ln{fill:none;stroke:var(--gv-blue);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:gxfedraw .5s cubic-bezier(.3,0,.2,1) forwards;animation-delay:calc(var(--i) * 220ms)}
.gx-frule{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:linear-gradient(var(--gv-blue-bg),var(--gv-blue-bg)),var(--gv-surface);border:1px solid color-mix(in srgb,var(--gv-blue) 45%,transparent);color:var(--gv-blue-ink);font:500 12px/1 var(--gv-font);white-space:nowrap;z-index:4;pointer-events:none;box-shadow:0 0 0 3px var(--gv-surface);opacity:0;animation:gxfein .25s ease-out forwards;animation-delay:calc(var(--i) * 220ms + 400ms)}
.gx-frule .i{width:14px;height:14px}
.gx-edges #gxArrowFlow path{fill:var(--gv-blue)}
@keyframes gxfedraw{to{stroke-dashoffset:0}}
@keyframes gxfein{to{opacity:1}}
.gx[data-z="company"] .gx-node > .gx-fsn{visibility:visible;display:flex;top:-22px;left:-22px}
.gx[data-z="company"] .gx-fsn i{min-width:44px;height:44px;border-radius:22px;font-size:22px}
.gx[data-z="company"] .gx-node.in-flow{background:var(--gv-blue-bg);border:4px solid var(--gv-blue)}
.gx[data-z="company"] .gx-fe .ln{stroke-width:8}
.gx[data-z="company"] .gx-frule{height:48px;padding:0 18px;border-radius:24px;font-size:22px}
.gx[data-z="company"] .gx-frule .i{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){.gx-fe .ln{animation:none;stroke-dashoffset:0}.gx-frule{animation:none;opacity:1}}
@media (max-width:900px){.gx-flowpick{max-width:50%}}

/* a flow picked: its steps in one row, left to right (js/grid-flows.js flowRow); the rest tucked, small and quiet, in a strip under it */
/* the row is fitted wide, so its cards read in larger type: who, its status, and what it does at this step (today's numbers stay in the drawer) */
.gx-node.in-row{min-height:196px;gap:8px;padding:14px 14px 12px}
.gx-node.in-row .gx-nt b{font-size:18px;line-height:24px}
.gx-node.in-row .gx-nt span{font-size:13.5px;line-height:18px}
.gx-node.in-row .gx-ms{display:none}
.gx-node.in-row .gx-chip{height:24px;font-size:13px}
.gx-node.in-row .gx-key{font-size:13px}
.gx-node.in-row .gx-step{margin:auto -14px 0;padding:10px 14px 0;gap:10px}
.gx-node.in-row .gx-sn{min-width:24px;height:24px;font-size:12.5px}
.gx-node.in-row .gx-sa{font-size:15.5px;line-height:21px;-webkit-line-clamp:3}
.gx-node.in-row .gx-fsn{top:-14px;left:-14px}
.gx-node.in-row .gx-fsn i{min-width:28px;height:28px;border-radius:14px;font-size:14px}
.gx-node.k-grid .gx-ic{background:var(--gv-raised)}
.gx-node.in-strip,.gx-core.in-strip{transform:scale(.72)}
.gx-striplab{position:absolute;display:flex;align-items:center;gap:8px;font:400 16px/22px var(--gv-font);color:var(--gv-ink-3);white-space:nowrap;pointer-events:none;opacity:0;animation:gxfein .3s ease-out .5s forwards}
.gx-striplab span{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:11px;background:var(--gv-raised);font-size:12.5px;font-weight:500}
@media (prefers-reduced-motion:reduce){.gx-striplab{animation:none;opacity:1}}
.gx-node.in-strip:hover,.gx-node.in-strip:focus-visible{opacity:.8}
.gx-core{transition:opacity .3s ease-out .12s,transform .52s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
.gx-core.is-away{opacity:0;transform:scale(.6);visibility:hidden;pointer-events:none;transition:opacity .22s ease-out,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s}
.gx-e{transition:opacity .3s ease-out .4s}
.gx-kind{transition:opacity .3s ease-out .3s}
.gx-stage.has-flow .gx-e,.gx-stage.has-flow .gx-kind{opacity:0;pointer-events:none;transition:none}
/* each arrow draws once the cards have landed; until then it, and its head, are not shown */
.gx-stage.has-flow .gx-fe .ln{opacity:0;animation:gxfedraw .5s cubic-bezier(.3,0,.2,1) forwards,gxfein .12s ease-out forwards;animation-delay:calc(var(--i) * 90ms + 380ms),calc(var(--i) * 90ms + 380ms)}
.gx-frule{display:block;white-space:normal;max-width:124px;width:max-content;height:auto;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.35;text-align:center}
.gx-frule .i{display:inline-block;vertical-align:-2px;margin-right:5px}
.gx-stage.has-flow .gx-frule{animation-delay:calc(var(--i) * 90ms + 700ms)}
.gx-flow.on-row{stroke-width:2;stroke-dasharray:3 13;opacity:1}
.gx-flow.on-row.f-active{stroke:var(--gv-surface)}
.gx-flow.on-row.f-held{stroke:var(--gv-amber);stroke-dasharray:3 13;stroke-width:3.5}
.gx-flow.on-row.f-proven{stroke:var(--gv-green);stroke-dasharray:none;stroke-width:3.5}
@media (prefers-reduced-motion:reduce){.gx-core,.gx-core.is-away,.gx-e,.gx-kind{transition:none}.gx-stage.has-flow .gx-fe .ln{animation:none;opacity:1;stroke-dashoffset:0}}


/* Pattern alerts (js/views/grid-alerts.js): the alert first in its actor's drawer, its fixes, and the Play menu. */
.gx-alertbox .gx-alert{margin:0 0 8px}
.gx-alertbox .gx-alert .gx-chip{vertical-align:middle;margin-left:4px}
.gx-alert.s-ok{background:var(--gv-green-bg);color:var(--gv-green-ink)}
.gx-alertbox h4.gx-k{display:block}
.gx-alertbox .pub-diff{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.gx-alertbox .pub-diff + p,.gx-alertbox > p:not(.gx-note){margin:0 0 6px}
.gx-alertbox .gx-li .gx-chip{grid-area:chip}
.gx-fixes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.gx-fix{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--gv-line-2);border-radius:8px;background:var(--gv-surface)}
.gx-fix > div{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.gx-fix > div b{font-size:13.5px;font-weight:500;color:var(--gv-ink)}
.gx-fix > div span:not(.gx-chip){flex-basis:100%;font-size:12.5px;line-height:18px;color:var(--gv-ink-3)}
.gx-fix .gv-btn{flex:none}
.gx-alertbox.is-done .gx-alert{margin:0}
.gx-playwrap{position:relative;display:inline-flex}
.gx-playmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:240px;padding:6px 0;border:1px solid var(--gv-line);border-radius:8px;background:var(--gv-surface);box-shadow:var(--gv-e2);display:flex;flex-direction:column}
.gx-playit{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:0;background:none;font:inherit;font-size:13.5px;color:var(--gv-ink);text-align:left;cursor:pointer}
.gx-playit:hover,.gx-playit:focus-visible{background:var(--gv-raised);outline:none}
.gx-playit span{margin-left:auto;font-size:11.5px;color:var(--gv-ink-3)}
@media (max-width:600px){.gx-fix{flex-direction:column;align-items:stretch}.gx-fix .gv-btn{width:100%}}