/* ============================================================
   unhardcoded diagram library — inline, reusable (homepage + docs)
   Everything is scoped under .uhd so it never collides with host classes.
   Host must load IBM Plex Mono + Sans. Palette is self-contained below.
   ============================================================ */
.uhd{
  --ink:#16171c; --ink-body:#3a3b44; --ink-muted:#6b6d78; --ink-faint:#9b9da8;
  --line:#e9e9ed; --line-strong:#d7d8de; --code-bg:#f7f7f9;
  --accent:#2552e6; --accent-soft:#eef2fe; --ok:#127a4a; --warn:#b2731f;
  --umono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --usans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  display:block; color:var(--ink-body); font-family:var(--usans); text-align:left;
}
.uhd *{box-sizing:border-box;}
/* neutralize host base-element styles leaking into the diagram (e.g. section{padding}) */
.uhd p,.uhd pre,.uhd code,.uhd section,.uhd h1,.uhd h2,.uhd h3,.uhd h4,.uhd ul,.uhd ol,.uhd li,.uhd figure{margin:0; padding:0; border:0; background:transparent;}

/* provider dot colours (shared) */
.uhd .dot{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); flex:none;}
.uhd .dot.p-antseed{background:#2552e6;} .uhd .dot.p-zai{background:#7a5af0;}
.uhd .dot.p-openai{background:#11806e;} .uhd .dot.p-anthropic{background:#c2683a;}
.uhd .dot.p-google{background:#1f9e5a;} .uhd .dot.p-deepseek{background:#5b54d6;}

/* SVG wires (shared) */
.uhd .wires{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2;}
.uhd .wire{fill:none; stroke:var(--line-strong); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); opacity:.9;}
.uhd .wire.lit{transition:stroke-dashoffset .6s ease, stroke .36s ease;}
.uhd .wire.drawn{stroke-dashoffset:0; stroke:var(--accent);}
.uhd .wire.tip{marker-end:url(#uhd-ah);}
.uhd .ahf{fill:var(--accent);}

/* ============================================================
   STAGED DAG  (.uhd-dag)
   ============================================================ */
.uhd-dag .uhd-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.uhd-dag .uhd-inner{position:relative; padding:6px 2px 10px;}
.uhd-dag .dag{position:relative; display:flex; align-items:center; gap:0; z-index:3;}
.uhd-dag .col{flex:1; display:flex; flex-direction:column; min-width:0;}
.uhd-dag .col-head{text-align:center; padding:0 6px 14px;}
.uhd-dag .col-head .cn{font-family:var(--umono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.uhd-dag .col-head .ct{font-family:var(--umono); font-size:12px; font-weight:600; color:var(--ink); margin-top:2px;}
.uhd-dag .col-head .cd{font-size:10.5px; color:var(--ink-muted); margin-top:1px; line-height:1.3;}
.uhd-dag .col-body{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:2px 10px;}

.uhd-dag .node{position:relative; z-index:3; width:100%; max-width:196px;
  border:1px solid var(--line-strong); border-radius:11px; background:#fff;
  padding:10px 11px 11px; box-shadow:0 1px 0 rgba(20,23,28,0.02);
  transition:border-color .2s, box-shadow .2s, transform .2s, opacity .2s;}
.uhd-dag .node.io{background:var(--code-bg);}
.uhd-dag .node.pending{opacity:.45; border-style:dashed; border-color:var(--line);}
.uhd-dag .node.flipping{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); opacity:1;}
.uhd-dag .node.routed{border-color:var(--accent); box-shadow:0 9px 24px -16px rgba(37,82,230,0.5); transform:translateY(-1px); opacity:1;}
.uhd-dag .nhead{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.uhd-dag .role{font-family:var(--umono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}
.uhd-dag .rstate{font-family:var(--umono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:var(--code-bg); color:var(--ink-faint);}
.uhd-dag .rstate::after{content:"queued";}
.uhd-dag .node.flipping .rstate{background:var(--accent-soft); color:var(--accent);}
.uhd-dag .node.flipping .rstate::after{content:"resolving";}
.uhd-dag .node.routed .rstate{background:#f3faf6; color:var(--ok);}
.uhd-dag .node.routed .rstate::after{content:"\2713 routed";}
.uhd-dag .passchip{font-family:var(--umono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:var(--accent-soft); color:var(--accent);}
.uhd-dag .objline{font-family:var(--umono); font-size:9.5px; color:var(--ink-muted); margin-top:7px;
  padding-bottom:4px; border-bottom:1px dashed var(--line); line-height:1.45;}
.uhd-dag .objline b{color:var(--ink-body); font-weight:600;}
.uhd-dag .cut{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:5px; row-gap:1px; margin-top:6px; font-family:var(--umono); font-size:9px; line-height:1.35; color:var(--ink-faint);}
.uhd-dag .cut .cl{text-transform:uppercase; letter-spacing:.05em;}
.uhd-dag .cut s{color:var(--ink-muted); text-decoration-color:var(--ink-faint);}
.uhd-dag .cut .cw{font-style:italic;}
.uhd-dag .pick{display:flex; align-items:baseline; flex-wrap:wrap; column-gap:6px; row-gap:2px;
  font-family:var(--umono); font-size:11px; margin-top:8px;
  border:1px solid var(--line-strong); border-radius:8px; padding:6px 8px; background:#fff;
  transition:border-color .2s, background .2s;}
.uhd-dag .pick .dot{align-self:center;}
.uhd-dag .pick .model{color:var(--ink); font-weight:600; min-width:0; word-break:break-word;}
.uhd-dag .pick .sep{color:var(--line-strong);}
.uhd-dag .pick .prov{color:var(--ink-muted);}
.uhd-dag .pick .cprice{margin-left:auto; color:var(--ink-faint);}
.uhd-dag .pick .inherit{color:var(--ink-faint); font-weight:600; margin-right:1px;}
.uhd-dag .node.routed .pick{border-color:var(--accent); background:var(--accent-soft);}
.uhd-dag .node.routed .pick .cprice{color:var(--ok); font-weight:600;}
.uhd-dag .pick.io{background:transparent; border:none; padding:6px 0 0; margin-top:5px;}
.uhd-dag .pick.pass{border-style:dashed;}
.uhd-dag .node.routed .pick.pass{background:var(--accent-soft);}
.uhd-dag .finalflag{display:none; margin-top:6px; font-family:var(--umono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.uhd-dag .node.final.routed .finalflag{display:block;}

/* ============================================================
   POLICY RESOLVER  (.uhd-res)  — spec  ↔  run
   ============================================================ */
.uhd-res .board{display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:start;}
.uhd-res .panel{border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; min-width:0;}
.uhd-res .panel-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); background:#fff;}
.uhd-res .panel-title{font-family:var(--umono); font-size:12px; font-weight:600; color:var(--ink); letter-spacing:0.04em; text-transform:uppercase;}
.uhd-res .panel-tag{font-family:var(--umono); font-size:11px; color:var(--ink-faint);}
/* spec */
.uhd-res .spec{background:var(--code-bg); padding:14px 4px 16px 0; font-family:var(--umono); font-size:11.5px; line-height:1.8; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.uhd-res .spec pre{margin:0; padding:0 16px 0 0; white-space:pre-wrap;}
.uhd-res .snode{display:block; padding:2px 12px 2px 14px; border-left:2px solid transparent; transition:background .2s ease, border-color .2s ease;}
.uhd-res .snode.active{background:#e7edff; border-left-color:var(--accent);}
.uhd-res .snode.done{border-left-color:var(--line-strong);}
.uhd-res .snode.hl{background:var(--accent-soft); border-left-color:var(--accent);}
.uhd-res .k{color:var(--accent);} .uhd-res .s{color:var(--ink-muted);} .uhd-res .p{color:var(--ink-faint);}
.uhd-res .c{color:#8a8d99; font-style:italic;} .uhd-res .cc{color:var(--ok); font-style:italic;}
.uhd-res .kw{color:var(--ink); font-weight:600;}
/* run */
.uhd-res .run{padding:14px 16px 16px;}
.uhd-res .rnode{border:1px solid var(--line); border-radius:10px; background:#fff; padding:11px 13px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.uhd-res .rnode.active{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.uhd-res .rnode.routed{border-color:var(--line-strong);}
.uhd-res .rnode.hl{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.uhd-res .rtop{display:flex; align-items:center; gap:9px;}
.uhd-res .rname{font-family:var(--umono); font-size:12.5px; font-weight:600; color:var(--ink);}
.uhd-res .rkind{font-family:var(--umono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); border-radius:5px; padding:1px 6px; letter-spacing:0.03em;}
.uhd-res .rstate{margin-left:auto; font-family:var(--umono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--code-bg); color:var(--ink-faint);}
.uhd-res .rstate::after{content:"routed";}
.uhd-res .rnode.active .rstate{background:var(--accent-soft); color:var(--accent);}
.uhd-res .rnode.active .rstate::after{content:"resolving";}
.uhd-res .rnode.routed .rstate{background:#f3faf6; color:var(--ok);}
.uhd-res .rnode.routed .rstate::after{content:"\2713 routed";}
.uhd-res .rsys{font-size:11.5px; color:var(--ink-muted); margin:6px 0 9px; line-height:1.45;}
.uhd-res .io .rsys{margin-bottom:0;}
.uhd-res .llm{cursor:pointer;}
.uhd-res .conn{display:flex; justify-content:center; align-items:center; height:16px; color:var(--ink-faint); font-family:var(--umono); font-size:12px;}
.uhd-res .conn::before{content:"\2193";}
/* badge */
.uhd-res .badge{display:inline-flex; align-items:stretch; gap:0; vertical-align:top; font-family:var(--umono); font-size:12px; border:1px solid var(--line-strong); border-radius:9px; background:#fff; overflow:hidden; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;}
.uhd-res .reel{display:flex; flex-direction:column; min-width:0;}
.uhd-res .objline{display:block; font-size:10px; letter-spacing:0.01em; color:var(--ink-muted); padding:6px 11px 4px; border-bottom:1px dashed var(--line); white-space:nowrap;}
.uhd-res .objline b{color:var(--ink-body); font-weight:600;}
.uhd-res .cand{display:flex; align-items:center; gap:6px; white-space:nowrap; padding:0 11px; max-height:0; opacity:0; overflow:hidden; transition:max-height .16s ease, opacity .14s ease, background .14s ease;}
.uhd-res .cand .dot{width:6px; height:6px;}
.uhd-res .cand .model{color:var(--ink); font-weight:500;}
.uhd-res .cand .sep{color:var(--line-strong);}
.uhd-res .cand .prov{color:var(--ink-muted);}
.uhd-res .cand .cprice{margin-left:8px; color:var(--ink-faint);}
.uhd-res .cand .why{display:none; margin-left:8px; color:var(--ink-faint); font-size:10px; font-style:italic;}
.uhd-res .cand .inherit{color:var(--ink-faint); font-weight:600; margin-right:1px;}
.uhd-res .cand.win{max-height:34px; opacity:1; padding-top:6px; padding-bottom:6px;}
.uhd-res .badge.open .cand{max-height:34px; opacity:1; padding-top:5px; padding-bottom:5px;}
.uhd-res .badge.open{display:flex; width:100%;}
.uhd-res .badge.open .reel{width:100%; min-width:0;}
.uhd-res .badge.open .cand{width:100%; flex-wrap:wrap; column-gap:6px; row-gap:2px; white-space:normal; align-items:baseline; max-height:none;}
.uhd-res .badge.open .cand .model{min-width:0; word-break:break-word;}
.uhd-res .badge.open .cand .cprice{margin-left:auto;}
.uhd-res .badge.open .cand .why{flex-basis:100%; margin-left:0;}
.uhd-res .badge.open .cand.win.picked{background:var(--accent-soft);}
.uhd-res .badge.open .cand.out.sift{opacity:.55;}
.uhd-res .badge.open .cand.out.sift .model,
.uhd-res .badge.open .cand.out.sift .prov,
.uhd-res .badge.open .cand.out.sift .cprice{text-decoration:line-through; color:var(--ink-faint);}
.uhd-res .badge.open .cand.out.sift .dot{background:var(--line-strong) !important;}
.uhd-res .badge.open .cand.out.sift .why{display:inline;}
.uhd-res .badge.open{border-color:var(--accent); box-shadow:0 12px 28px -18px rgba(37,82,230,.55);}
.uhd-res .rnode.routed .badge{border-color:var(--accent); background:var(--accent-soft);}
.uhd-res .rnode.routed .badge .objline{border-bottom-color:#cfdcff;}
.uhd-res .rnode.routed .badge .cand.win{background:transparent;}
.uhd-res .rnode.routed .badge .cand.win .model{font-weight:600;}
.uhd-res .badge.pass{border-style:dashed; background:var(--code-bg);}
.uhd-res .rnode.routed .badge.pass{background:var(--accent-soft); border-style:dashed; border-color:var(--accent);}
.uhd-res .passnote{font-family:var(--umono); font-size:10.5px; color:var(--ink-faint); margin-left:auto; letter-spacing:0.02em;}
.uhd-res .keynote{margin:15px 2px 0; padding:13px 0 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-muted); line-height:1.6;}
.uhd-res .keynote code{font-family:var(--umono); font-size:11.5px; background:var(--code-bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--ink-body);}
.uhd-res .keynote b{color:var(--ink); font-weight:600;}

@media(max-width:760px){
  .uhd-res .board{grid-template-columns:1fr; gap:14px;}
}
@media (prefers-reduced-motion: reduce){
  .uhd .wire.lit{transition:none;} .uhd-dag .node{transition:none;} .uhd-res .cand,.uhd-res .badge,.uhd-res .rnode,.uhd-res .snode{transition:none !important;}
}